Google search engine
Home Blog Page 40

How is UI/UX Design Important for an App

Shaiq Khan
-
0
How is UI/UX Design Important for an App

There are millions of mobile apps on the app stores today that gets around 200 billion downloads each year. While only a few have been successful and others find it extremely hard to strive in this highly competitive market. But there is always that one thing which is common in all the successful apps. And that is the look and feel of the app.

A visually appealing and engaging mobile app is mostly a result of creating an effective User Experience (UX) and User Interface (UI). In this era of digitization, where mobile and its related technologies are gaining worldwide popularity, your mobile app has to have an interactive and intuitive user interface.

We are here to deeply understand how UI & UX Design of your app is important for its success, but before we do that, you need to know what UX and UI are and how they function.

What is a User Interface (UI) of an App?

I’m sure you’ve heard of it a number of times, but do you know what it exactly is?

A User Interface (UI) ap an app is basically the appearance of the app when it interacts with the user. And it’s not just navigation menu’s, there’s a lot more to it which we will know right now.

UI design is not just about how it appears, but it’s also about how the product functions. UI includes the implementations of navigation and call to action buttons so that the user doesn’ t have to struggle with understanding what they should do next, rather just make a smooth flow.

An effective UI design of an app is the one that helps the user instinctively figure out all its features, functions, and usage in order to successfully serve the purpose of their use.

What makes a great UI Design?

Responsiveness

If your app is functioning slow and giving an irregular response pattern, consider removing it. Because one thing a good UI does not cause is the delay in the functioning of the app or slowing down the user flow. A great UI informs the user of all ongoing activities, for instance, when any page is loading, when a process is completed, the purchase has been confirmed, etc.

Familiarity

A lot of users get confused and reject an app if they don’t find familiarity with features like navigations and call for action. It happens with everyone, it’s a general human tendency to lean towards familiarity.

It’s good to experiment, but not to an extent that it confuses the end user.

Consistency

Consistency in the interface design across the application enables the user to track patterns. If any user quickly understands how certain parts of the interface works, then they should easily be able to identify other similar patterns to navigate to other functions of the app.

What is a User Experience (UX) of an app

A User Experience comprises of human feelings, perceptions, emotions, and preferences during and after using a mobile application.

When an app is in the development phase, the designer determines and gather feedback from the testers to resolve and provide a better solution in terms of design.

What makes a great UX

A great UX in an app can be determined by how long a user spends time in the app to complete the entire flow.

For instance, in an e-commerce app, a user tries to make a purchase. the amount of time it takes the user from adding the product to completing the transaction is what determines how good the UX of that app is.

An impressive UX design is the result of the competitive analysis done during research by the designer.

Key Elements of an Effective UI/UX

An effective UI/UX structure requires users to stay and help businesses to eventually gain loyal customers.

Here are some of the basic elements of an effective UI/UX of a mobile application that you should follow:

Make the App faster

An efficient and effective UI design doesn’t consume time while loading or navigating from option to option. Remember, the longer the app takes to load features and to navigate, the attention span of a user on the app decreases.

As interactive as possible

An interactive app is any dater way better than any non-interactive one, and that’s a fact. When the app allows the user to interact, it creates a connection between them. An interactive app is the one where navigations between windows are quick and easy.

Platform-specific designs

There is a massive difference between the Android app UI design and an iOS app UI design. An effective UI has to consider the way both platforms are designed on the device level. The UX design of these two different platforms also differ.

What is required for a designer is to understand both Material Design Human Interface Design in addition to the element that separates them from each other.

The Importance of a good UI/UX design

Most developers create an app with a stunning performance but fail to focus on the designing which eventually leads to failure of the app. There has to be kept a balance between the functionality and the UI/UX of the app.

To get to the know importance of the UI/UX, let’s take a look at some of the points below:

Captivates Users

When users open an app, the app has just a few seconds to leave an impression on them. The user will only decide to continue using the app if the design of the app is compelling enough. The next major factor is engagement. If the user finds it gripping only then they will navigate further on the app.

Conserves time and cost

If you invest your money in a magnificent UI/UX design, there is very little chance that your customers will discover any trouble or difficulties using your application. A flawless product will not require a frequent update and thus, help you in saving time and money.

Enhanced customers satisfaction & improved ROI

When an app has an impressive design, it presents the customers with catchy content and easy navigation, making them satisfied with their usage of the app. A pleased customer will recommend the app to others which will lead to increased customer and hence increases the ROI of your business.

Some of our best design in 2020 and beyond

:: UPI Payment App

:: E-Commerce App

:: Care Giver App

Parting Thoughts

The UI/UX is the most critical aspect of a robust and good quality mobile application. The coordination between UI and UX is a way to achieve the desired results.

In the current times, the designers and developers carry out intensive research to identify all sorts of issues and make an attractive product for the users.

If you were unaware of this, all this long, it’s time to pad up the designers and let them breathe into your dream mobile application.

If you are planning to have your own mobile application, website, custom web app or have any type of query or concern regarding its concept, technical know-how, the best way to get it done then don’t hesitate.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Progressive Web App(PWA) in Flutter

Shaiq Khan
-
0
Progressive Web App(PWA) in Flutter

In this article, we will learn how progressive web app is special and what makes it crucial when it comes to making an effect on business and how to build it In Flutter. Before learning PWA and their — pros and cons. Let us have an outlook about the — Progressive Web Apps (PWA)

What are Progressive Web Apps

Progressive Web Apps are like having qualities of web and app at the same time, web and app have their own and different capabilities, for example, we see for web, it is a mix of ubiquity across all the devices and operating systems and important fact is its user-centered security model, specification and implementation is not controlled by any specific company or organization which makes it special, Web applications can reach anyone, anywhere, on any device with a single codebase.

While Native applications are known for being rich and reliable they have their own standalone experience, Native application feels like a part of the device they are run on as you can read and write files from the local system and also with data stored on the device like contacts, calendar. Easily access hardware connected via USB, Serial, or Bluetooth. So will have awesome user experience if you compare with the web.

If we look at both the platforms in different aspects such as capability and reach then native apps best in capability while web apps are best in the reach.

So where does the Progressive web app exists?

Progressive Web Apps are designed, built, and enhanced with advance and modern APIs to deliver which consist of qualities of both native app and web apps, such as native-like capabilities, reliability, on any device with a single codebase, installability and reaching anyone, anywhere.

This was a go through sections of Pwa but let’s check how its market is growing

Facts :

As you know humans have a tendency to check a comparative study and numbers up and down to believe, so for information Companies which have launched Progressive Web Apps have seen some impressive results. For example, Tweeter registered a 65% increase in pages per session, 75% more Tweets, and a 20 % decrease in bounce rate, all while reducing the size of their app in by over 97 %. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their native desktop experience with a Progressive Web App and saw a 27% increase in return visits.

It was an introduction of Progressive Web APP now we are going to understand its basic implementation :

Why PWA?

You might be wondering the community going gaga over it, if we can hold all versions like android, ios, web separately then why we need it? so the reason behind it is if the user wants to use your without installing it and if users want to run a web version of it on mobile then PWA is the option that can give the full experience of APP. As you can observe various sites give an option on ads to open their app.

Developing PWA in Flutter

As there are many options to develop a Progressive Web App but the thing which makes Flutter well suited for this is its availability over all platforms. As we know Flutter is a cross-platform app development toolkit to develop an app, you can deploy your app on platforms like Android, iOS, web. which makes it stronger in terms of availability and reach with higher performance and responsiveness. The intention behind developing PWA is quite the same if you observe what flutter does. So it would be best to go with flutter if you want to develop your app with PWA.

Implementation

System Requirement :

  • Flutter SDK
  • Install Chrome

Implementation of Progressive Web Apps requires a web app to make it happen so first you need to set is up for web

Setup for Web

first, you need to run it on the master channel, for this, you need to run a command

flutter channel master

it may take some time then run the following commands :

flutter doctor -v

It will show some messages so you can check if you have required setup :

for observaton
ex

After this, you need to set up web support for the application by running the command

flutter config --enable-web

as if it is already available it will “true” on the terminal then you will find a web folder in your directory then the next step is to edit your index.html file you can edit it manually to step things but is it very easy to write it by command so first, delete your index.html file then run

flutter create .

Note : Please don’t forget to run it with that dot(.) either you will get some errors

You need to run the command in your terminal to create a build folder, which is necessary to host your app on the web.

flutter build web

Now you can run your app on the local server if you want to make changes in your web app like app icon, orientation, name, display, background-color then you can change it by editing manifest.json file in the web folder either manually or you can create manifest.json file by using

https://app-manifest.firebaseapp.com/ you can generate manifest.json then replace the previous file by new.

now you are done with this flutter setup, now you can host your app on the local server but if you want to host on other platforms like Surge or Firebase then there is a different process to implement it. so let’s understand it in following steps

Hosting the PWA APP on Server

Hosting of Web APP on different servers requires installing Node.js on your machine it provides all required things to host your file on the server.

lets first install it on the machine, here I am installing it on ubuntu so open your terminal and run the command

sudo apt install nodejs

It will start working, once it installed you can verify it by checking the installed version by this command

node -v or node –version

you will find this if installed properly (version could be different)

Note: It is recommended to install the Node Package Manager with Node.js on the machine as it provides different packages, run the command to install it.

sudo apt install npm

and you check it by running the command.

npm -v or npm –version

For installing the web on server Node.js and NPM may require the latest version so you can update it. You can visit this Website to do so.

so now you have the latest versions of Node.js and npm now I will host my app on firebase (you can also host on Suge by installing it on your machine).

For firebase hosting first, you need to create a project on Firebase here you need to select hosting.

then you need to start and follow the instruction as it says. You need to install firebase tools in your machine by running the command

npm install -g firebase-tools

it may take some time but once it installed you are ready to use now you need to log in firebase by running

firebase login

but wait you may found some error of firebase or npm so if you get please sort it by upgrading your firebase tool or refreshing npm,

Firebase Upgradation: You may run command to install firebase version according to the error you found by running the command(@7.6.1 is the version of firebase tool)

npm install -g firebase-tools@7.6.1 
or
npm i firebase-tools@7.6.1

you can also go through this Firebase CLI documentation for any firebase related query or problem

NPM Upgradation

If you run firebase login in your terminal and get error command not found you need to refresh your npm

For NPM Related problem you can go with Documentation and you need to run only given commands and sort this problem out.

now you again you need to run the command firebase login and if you are not logged in it will take you to the screen where you need to verify your firebase account and if you are already logged in you will get this.

now run command

firebase init

here you will find a window where you need to select which action you are going to perform, here we are going to host it so we would select it

then we get an option to select which folder you want to set as a public directory so we would use web folder of build folder because we need to host this folder on the server, and then we select all override options As “NO” because we need not override it because we have already run it (so it is necessary to run at least once before doing this process)

now as it says initialization is completed so there then we can run the following command:

firebase deploy

hereafter running this command we have deployed our project on firebase and as you can see we have got a link which has been automatically created by it you can use this to see your deployment.

you can also see it by running the command

firebase open

As stated in the above image: To select what is needed to open we have selected Hosting: Deployed Site which then takes me to the site as can be seen underneath.

So this was a basic implementation showcasing Progressive web App.

Conclusion:

PWA is a business-friendly idea to provide the same user experience to the user of your app in all platforms and it could be quite difficult tasks if develop apps for all platforms separately hence the PWA is the solution of it. the best thing which comes as an outcome with PWA in terms of business is it boosts business in various aspects such as no of users, total reach, lesser size of the app and availability of app among users easily and it would be the icing on the cake if you go with Flutter to develop it because Flutter consists almost each and everything you want with PWA.

If this article has helped you a bit and found interesting please clap!👏

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Flutter and Fuchsia — The next big thing

Shaiq Khan
-
0
Flutter and Fuchsia — The next big thing

I’m sure we’ve all heard the cheers for flutter lately. It has been incredibly popular since it’s release. Some big technological influencers say that Flutter is the future of mobile app development. But, Google didn’t just stop there.

After Flutter, Google’s Fuchsia is increasingly gaining attention. Google Fuchsia came to light in 2016, when Google first uploaded its experimental operating system project on GitHub. According to the initial assessment made by the technology press, the idea behind the new operating system was to make a ‘universal’ operating system, that can run simultaneously on all platforms like smartphones, tablets, smart home devices, etc.

One of the most interesting things about Google’s Fuchsia is that it is not based on Linux, which Microsoft and Apple use to build a universal operating system. Google built its own microkernel from scratch called Zircon.

Something that interests the developers is the documentation. Fuchsia operating system supports Dart. Yes, the same language, which is used in the Flutter framework for building applications.

Let’s dive deep into understanding Fuchsia and what it has stored in for us in the future —

What is Google Fuchsia for?

Google Fuchsia operating system is designed to provide the most effective and efficient functionalities on all the platforms. It has the ability to run on any CPU architecture. Google’s plan is to make it run on all laptops and PCs. Google is also working on IoT to make it compatible with smart home devices.

Future with Flutter

As we all know, Flutter already works smoothly on Android and iOS. Now knowing that Fuchsia supports Dart, it is safe to assume that Flutter will gel with Fuchsia.

What makes Fuchsia so unique is the ability to run on any CPU architecture. Fuchsia has the ability to change how we interact with our devices, as if they use the same OS, creating its own ecosystem is highly possible. There will definitely be some benefits over the android such as improved overall performance, battery life, and it might possibly even run onGoogle’s custom chips they have been rumored to be experimenting with.

On the other side, Flutter is known for saving cost with its single codebase development and hot reload feature on Android and iOS platforms. If in the future, developers are able to use the double power Flutter and Fuchsia together, they can release apps on any platform like smart home with minimum investment and in record time.

Fuchsia Special Features

Astounding User Interface

One of the biggest things that will make you switch is the Material Design on Google OS. Its beautiful UI components include mind-boggling background, notifications, buttons, etc. to build seamless interaction with the user in the app. It will allow the developer to easily drag, drop, and personalize the home screen.

Cross-Device OS

Google Fuchsia OS is being designed in a way that it works on any device ranging from Smartphones to wearables, laptops, tablets with the same user experience. Its cross-device support enables developers to build apps using the single codebase and run them on multiple devices.

Assistant Friendly

Google Fuchsia is designed to create Google Assistant, thus making it more assistant friendly than Android OS. Google Fuchsia will utilize the app drawers, use the camera, and on-screen API authentication to use features.

Can Fuchsia replace Android and Chrome OS?

After Google revealed the home screen design of Fuchsia OS for the Pixelbook, we can certainly think of it replacing Android and Chrome in the future. Google’s conventional Operating system based on Flutter uses microchips to reduce load, and increase efficiency. It does not come with pre-installed files that increase load size, Unlike Linux. Fuchsia is portable and is highly flexible for developers to build software from scratch.

Earlier, Google rolled out Android and Chrome open-source operating system faced serious challenges of licensing consumer privacy and security. Therefore, it makes sense for Google to build an operating system that is governed and controlled more by the parent company.

So, in a nutshell, the future of operating systems look really bright, considering the application of Fuchsia goes just as we have imagined. Of course, it’s still way too early to tell whether it will succeed, even whether it will end up becoming released or abandoned. We only just saw fuchsia running on Android Emulator for the first time, before we only saw a console without any GUI. I would be very surprised to see Fuchsia running on a production-ready device within at least the next 2 years, but I am really looking forward to trying it out on a physical device for the first time.

Conclusion

As said, Fuchsia is still in the early stages of development. We can only mention that Fuchsia OS will be a real thing with significant support of Google. The repository is on GitHub and documentation is made open to the public to anticipate what developers and app-based companies get from it.

Though we still have to wait till Google announces the project release there’s one thing that we can say that Fuchsia is most likely going to be the successor to Android, Chrome, and other operating systems.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Custom Clipping in Flutter

Shaiq Khan
-
0
Custom Clipping in Flutter

Today we are taking a look at how to implement a custom shape. How we can make a custom clipper with straight lines, Bezier curve in Flutter.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

What is Clipper?

A custom clipper can be used to clip the widget into any desired shape. In Flutter, it can be done easily thanks to built-in clippers such as ClipOval, ClipRect, ClipRRect, and ClipPath. To achieve this custom shape you need to define what is the path which you need to clip to make your UI awesome.

ClipPath is used to create a very custom widget like a widget that has a wave border or quadratic border. To make something like that, you should make your custom clipper.

Some Built-in Clipping Widgets:

Let’s take a look at some Built-in clipping widgets and see what each one provides. Each of these has a defined behavior.

1. ClipRect

You can use to clip a rectangular area out of a your_pretty_widget(). For example, you could use ClipRect if you only wanted a desirable rectangular part of a your_pretty_widget();

2.ClipRRect:

With the help of ClipRRect widget, you can clip the image with rounded corners. You can’t shape into an image with rounded corners with Container widget decoration properties.

3. ClipOval

ClipOval creates an oval using the widget’s bounding box, If the width and height of the widget are equal, the shape will be a circle. Same as I mentioned above you can’t shape into an image with an oval shape with Container widget decoration properties.

4. ClipPath

if mentioned above ClipRect, ClipRRect or ClipOval doesn’t help you to achieve your desired shape of your_pretty_widget(), ClipPath is used to create a very custom desired shape.

Suppose if you want to implement shape like a star, heart basically you desired custom shape. This can be achieved by using Custom Clipping.

Custom Clipping

Let’s move to the coding part :

ClipPath(
   clipper: ChatBackgroundClipper(),
   child: your_pretty_widget();
 )

To make your custom clip, you should make your own class, and make it extends CustomClipperand then override two methods.

  • getClip() it returns a path given that the rendered object being clipped is of the given size.
  • shouldReclip() it returns a boolean that determines if your widget needs to be reclipped or not
class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return bool;
  }

As it is cleared from the above diagram x increases horizontally, and Y-axis increases downward.

Methods To Give shape

MoveTo :

with the help of this method, you can move your point of clipping.

path.moveTo(x, y);

LineTo :

with the help of this method you can, You can cut your pretty widget with a line. Here x, y is your destination point where your line stop.

path.lineTo(x,y);

quadraticBeizerTo:

with the help of this method, you can clip your widget with a curve. In this endPoint is your destination point where your curve end. And our main is the control point you can understand like a magnetic point for a curve.

var controlPoint = Offset(x, y);
var endPoint = Offset(x,y);
path.quadraticBezierTo(controlPoint.dx, controlPoint.dy,
    endPoint.dx, endPoint.dy);

Let’s Take a look into my example which I have created for you

To Achieve this kind of shape :

Here is the path code :

@override
getClip(Size size) {
  var path = Path();
  path.lineTo(0.0, size.height);
  var firstControlPoint = Offset(55, size.height / 1.4);
  var firstEndPoint = Offset(size.width / 1.7, size.height / 1.3);
  path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
      firstEndPoint.dx, firstEndPoint.dy);
  var secondControlPoint = Offset(size.width - (35), size.height - 95);
  var secondEndPoint = Offset(size.width, size.height / 2.4);
  path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
      secondEndPoint.dx, secondEndPoint.dy);
  path.lineTo(size.width, size.height - 40);
  path.lineTo(size.width, 0.0);
  path.close();
  return path;
}

How To Achieve this kind of shape :

Here is the path code.

var path = Path();
path.moveTo(0.0, size.height*0.20);
path.lineTo(0.0, size.height*0.60);
path.quadraticBezierTo(0, size.height*0.80, 15, size.height*0.80);
path.lineTo(size.width-20, size.height*0.80);
path.quadraticBezierTo(size.width-10, size.height-10, size.width, size.height);
path.quadraticBezierTo(size.width-10, size.height*0.90, size.width-10, 15.0);
path.quadraticBezierTo(size.width-12, 0.0, size.width-30, 0.0);
path.lineTo(15.0 , 0.0);
path.quadraticBezierTo(0.0, 0.0, 0.0,size.height*0.20);
return path;

Conclusion :

With the Flutter framework, you can achieve any desired shape with its awesome widgets. Achieve beautiful designs very easily and quickly, There are a lot of plugins as well help you to achieve your desired UI. But don’t overuse clipper because it may be causing you to slow down your app.

Link for repository :

flutter-devs/Flutter-Custom-Clipper
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Design Patterns in Flutter -Part 3 (MVVM)

Shaiq Khan
-
0
Design Patterns in Flutter -Part 3 (MVVM)

Design Pattern in Flutter is very important in developing flutter application and for its better understanding I would request you all to go through my previous blogs Design Patterns in Flutter -Part 1(MVC) and Design Patterns in Flutter -Part 2(MVP), I hope it will clear your every doubt regarding design pattern and the difference between the Design pattern and Software Architecture.

In this blog, we will dive deeper into the significance of Model View ViewModel (MVVM) architecture of Flutter, used for implementing app designs. The MVVM pattern provides a uniform distribution of data with the benefits of flexibility and reusability of the code as well as data.

MVVM was introduced by Microsoft in 2005 and since then MVVM architecture and its components have been an essential tool in app development projects.

What is MVVM?

Looking at the definition of MVVM it is the abbreviation of three words namely Model, View, and View Model. The concept of MVVM is to build a view model that can represent the data through a view.

So by looking at the flow diagram of MVVM, we could see that the view model occupies the central position which sends and receives the data from the model and provide the data to the view, it also observes the data changes that occurred at the view and responds accordingly using the model to the view. To write an adaptable codebase, app developers need to build a View-Model layer that can be utilized by several ‘Views’. Now we will look at each individual component individually.

The Model

The Model in the MVVM design pattern represents the actual data(real-time) which will be used in application development. for example, we could understand with the help of a real-time scenario of the bank where this element will be the account number, having a person’s name and address.

for better understanding, you could say that the Model can only reflect the actual data, not the characteristics or any feature related to the application. It means you can’t manipulate the way how the data will be represented or formatted. Each item in the dataset will be representing its own model when the data is fetched.

Mainly the Model is kept in away from the logic part for neat code but sometimes it includes the validation logic as well.

The View

The View in the MVVM design pattern represents the Interface that the user gets to interact with the application. This element utilizes a set of libraries to present the data more accurately and appropriately.

This element also possesses the property to utilize behaviors associated with the Model, such as identifying and act according to user input. The View can handle the actions done by a user, which can be manipulated by the Model’s functionalities.

The View Model

The most essential element of MVVM architecture is ViewModel, which presents the View part separately from the Model. This element makes the Model hold the actual data, and the View part holds the formatted or updated data while keeping the controller as an interface between them.

As an interface, the controller has all the records of user input in the view to place them in the model. Or, it can interact with a function of the View to retrieve the data from the Model, then translating the properties to merge it with the View.

The ViewModel also possesses access to the methods, function calls, and other factors that can help to maintain the actual state of the View. Moreover, this access also allows ViewModel to manipulate or moderate the Model according to the behaviors in the view while triggering its processes.

While building the MVVM design pattern, these elements play a crucial role. As their properties include consistent synchronization with each other, users can have the leverage to interact with the application smoothly.

Code Understanding

If you have not installed the flutter SDK or you are still getting familiar with it :

Let’s dive into the code part for an In-depth understanding of the process:-

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName
  • Add the current latest version of HTTP and Provider package under the dependencies in pubspec.yaml file.
dependencies:   
http: ^0.12.1  
provider: ^4.1.3

Create UI:

/media/3f6855e0e5dc194c8b7ae561d8b1771b

This shows the View part of the MVVM design pattern, In this, we are getting the movie list from the Model.

Create Web Service:

/media/06d5ed40145a0089fd682c21c3fdac67

This Denotes the Model of the MVVM design pattern.

Create a view model:

Create a model class named movie.dart:

/media/d9d76145f90fc888d7567a9d06d5cb19

This is the View Model which takes data from the model and makes it accessible to View.

Create a widget :

/media/3c6d77c7d4c0b9bd947c9f27d37d7ab1

Creating the main file :

/media/035c827e90903182a9ac057964860ad6

Find the code version on GitHub at:

flutter-devs/flutter_mvvm_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Why MVVM for Flutter?

The most common issue that app developers face is the consistency in the whole codebase. Even a small change in a single thread creates plenty of bugs while testing the application. This results in a lack of tight coupling.

MVVM architecture has the capability to overcome these hiccups and deliver better design patterns for the app. All the complexities will get a halt with these patterns.

Here are the ways through which it overcomes these hiccups:

  • Tight Coupling:- Only View(Activity) holds the reference to ViewModel and not vice versa, this solves a tight coupling issue. A single view can hold a reference to multiple ViewModels. Here, the reference to any ViewModel is kept only by the View. As a result, the problem with tight coupling will remain solved.
  • Testability:- ViewModels can easily represent the data or the state. Hence, they can be tested independently without requiring to know how data is processed. This happens because ViewModels are independent of the Views.
  • Code Sharing and Usability:- MVVM architecture allows this objective to get fulfilled with the help of Models. This layer can be utilized for building design patterns in other applications as well, without modifying codes.

You can find each part of this series for the posts in the links below:

Part 1 — Design Pattern MVC

Part 2 — Design Pattern MVP

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

The Journey of FlutterDevs

Shaiq Khan
-
0
The Journey of FlutterDevs

FlutterDevs — Helping startups and businesses across the globe go Flutter. We build apps that are fast, scalable, and render a delightful native experience to the users across the world with Flutter app services.

Rise of FlutterDevs

As a wise man once said, “Never doubt that a small group of thoughtful, committed people can change the world” .The team of FlutterDevs has been the native heroes for the 10 years. Before Flutter was introduced, we had made hundreds of applications for the Android and iOS platforms. Our team believes in helping and bringing change in the society. Be it creating apps for startups that draw fundings or building digital solutions for Govt. of India for the betterment of the society, we’ve done it all.

The Alpha version of Flutter was made public in 2018. That was the first time when our expert team members heard of it and being the proud tech nerds, Straightaway jumped into Understanding the framework. While we were working on the Alpha version of Flutter, we realized some of Flutter’s best offerings to the developer community.

Hot Reload — Reduces code development time

Less Coding

Rich set of widgets and ability to customize

Native like features

Own Rendering Engine- Skia

These are some of the most important advantages we felt at that early stage. But we definitely realized Flutter is going to revolutionize the development of cross-platform applications.

Fuchsia — A cherry on top!

Soon after Flutter was launched for the public, Google announced and provided source code and documentation of its new operating system, Fuchsia. Fuchsia, a new cross-device open-source operating system. Google’s idea behind this new OS is to create a Universal operating system that runs simultaneously on different devices like Smartphones, Laptops, Tablets, Smart home devices, etc. After the release of documentation by Google, it became clear that Fuchsia OS supports the Dart as a programming language.

Dart, the same programming language on which Flutter is built on. We knew that Flutter already runs smoothly and android and iOS devices and also supports the Web & Desktop as well. It was an alarming moment where we understood that Flutter’s market is going to skyrocket in a few years. And that is when our entire focus was dedicated to mastering this amazing piece of technology.

Some great application built with Flutter

Flutter Showcase consists of a plethora of applications that are increasing in multiple folds each day with large enterprises trusting flutter for their large userbase apps shows the amount of trust that Flutter offers.

Some of the apps that really stood out are:

Google Ads :

Developed by Google using Flutter and it’s available on Android and iOS

Google Ads in an important tool for anyone who is looking to manage and run their ad campaign anywhere on the go. This app helps customers run their ad campaigns so that they can market their services or products and increase their customer base. Featuring a stunning design, this app presents the user with an ocean of information within a tap’s search.

With over 10 Million+ downloads, the app is a beast on its own.

Playstore, App Store Links

Xianyu by Alibaba

Alibaba, the Chinese multinational e-commerce giant that owns the world’s largest e-commerce platform, used the power of Flutter into its shopping platform. Flutter helped Alibaba create something fast, smooth, and ridiculously easy to use and they came up with Xianyu.

Xianyu is being used more than 50+ million users regularly too but and sells millions of products from a gigantic category volume.

Hamilton

This is the official application for one of the famous award-winning Broadway musicals — Hamilton. It was built specifically for its large community of fans to stay updated with all music-related news.

The app offers, along with other things, a karaoke feature for those who want to sing along to their favorite songs, access to a number of different Hamilton lotteries, a daily trivia game. The user experience of the app is outstanding on both platforms.

The app currently has 500,000+ users.

PlayStore, Appstore

Reflectly

Reflectly is a personal journal and diary driven by artificial intelligence to enable you to deal with negative thoughts, make positivity louder, and to teach you about the science of well-being. An award-winning mindfulness app built with Flutter. It was featured on the Apple App Store as an ‘app of the day’.

Having 1 Million+ downloads with a rating of 4.3 from over 30,000 users.

PlayStore, AppStore

What makes Flutter the best option for Cross-Platform App Development?

We already know that Flutter is backed by Google and uses Dart programming language. Now, Dart is one of the biggest reasons why developers love Flutter. Dart has Ahead of Time Complied to fast, predictable, native code, which allows Flutter to be written in Dart.

Even though there are a ginormous amount of reasons why Flutter stands out as the best choice for Cross-platform Development, but we’ll try to point out a few. Which are —

High Performance

Flutter allows us to do so much stuff with the apps that are not available on any other platform. Obviously, it will require the framework to be really powerful. In fact, any of the advantages of Flutter wouldn’t be possible without a High-performance cross-platform rendering engine.

Flutter has Skia, their own rendering engine for rendering itself onto the platform provided canvas. Because of this engine UI built in this framework can be launched on virtually any platform.

Lesser Coding

Flutter’s Dart programming language is strongly typed and object-oriented in nature. In Flutter, the programming style is declarative and reactive. Because JavaScript bridge is not necessary for Flutter, the start-up time of the app enhances.

And of course, as Dart programmed flutter framework supports multiple platforms, the written code can be used to support different channels like Mobile, Desktop, and PWA.

Time Tested Efficiency

Flutter has been around enough to showcase concrete proof of its reliance and efficiency. Apps like Google Ads, Reflectly, Alibaba, Hamilton, which we discussed, are the simple portrayal of Flutter’s ridiculous efficiency. These apps with millions of downloads and daily users, generating millions of queries per second, show the reason why these technology giants trusted Flutter with their apps.

Where does FlutterDevs stand now?

Flutter was not always the same. We’ve been working on flutter since it’s inception and we’ve seen Flutter and it’s community grow. There were a lot of challenges initially, which were resolved by the community itself.

Like everyone else, we also started from zero. But we’re thrilled to see where we have reached with our dedication and teamwork.

We have bagged 21st Rank worldwide by GitHub awards for our contribution and quality of work. In the last two years of working on Flutter has completely changed the way we see the mobile app development industry. And it never fails to surprise us every day. That is the reason why we as a Mobile App Development Company, majorly develop in Flutter.

Let’s take a look at where we stand in the Flutter App Development Industry right now with our mighty stats:

quick glance

Some of the apps that we are proud of making

We have built a number of applications for our clients across the globe. As much as we loved building these apps with Flutter, our client and their customers are loving using these applications.

Here are some of them:

Old Pazar

An app that connects local people to buy, sell, or exchange used goods and services by making it fast, easy, and free for anyone to post a listing through their mobile phone app. This app helps shop owners or anybody to add their products and services to sell easily through a special section created for this purpose.

Old Pazar is the largest Arabic marketplace in Turkey. It has 10,000+ downloads with a 4.9 user rating on the play store.

Playstore link

Google Devfest

The official DevFest mobile app for the GDG community. The app gets the user all the details of the events from Speakers of the event to agenda and sponsors, etc.

Playstore Link

FlutterDevs Startup Incubator Programme

We see an enormous 150 Million Startups in the world and new ones coming up every day but almost 93% of startups fail within 18 months.

In order to help startups in upscaling their business with their current problems like lack of guidance, finances, proper marketing strategy, FlutterDevs has come up with FlutterDevs Startup Incubator Programme.

This platform for newly emerging startups provides all young business the facilities like:

  • Conceptualisation Team
  • UI/UX
  • Development Team
  • QA Testing
  • SEO & Marketing
  • Support

Why FlutterDevs ?

At FlutterDevs, we focus on challenging our limits of user-centered design by creating evident mobile solutions. FlutterDevs is not just a service provider, but we are a bunch of people who thrive on Flutter, as it’s our only passion. We work continuously to help grow the Flutter community with our open-source contributions, educating curious minds like ours by writing Blogs, Organizing flutter meet-ups, and many more.

We love to communicate with people with the same passion for learning and making flutter stronger. This is why we have built our 20k+strong LinkedIn community, where we exchange ideas, knowledge, and get feedback.

Our 100+ open-source module, 10+ Plugins that we have developed, and 20+flutter themes, help us Fastrack the development process. Right from conceptualization to launching the app, we have dedicated teams working on each phase under one roof.

In a nutshell, FlutterDev’s intent to work in Flutter is based on our passion for this piece of art. We dream to be the world’s best flutter app development company and that is what drives us. We want every app that we build to be the best app ever.

Check these links for more Info:

Closing Thoughts: Flutter for future

The increasing rate of adoption of Flutter Framework is telling that more and more mobile developers are switching to Flutter. The continuous effort of the Flutter community to polish the framework is already putting flutter ahead in the race. Over 2 million developers have used Flutter in the last sixteen months of its release and it’s constantly growing. In these unprecedented conditions, google saw 10% month over month growth in March, making it nearly a half a million developers using Flutter every month.

FlutterDevs being the leader of this community has been around Flutter since the origination sixteen months back. We see a massive shift in the cross-platform application development in the mobile app development industry. Flutter takes fewer efforts, less time, and smaller investments for app development. The community behind flutter is determined to set a higher standard of cross-platform development in 2020 and beyond.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

FlutterDevs

State Management In Flutter-Provider

Shaiq Khan
-
0
State Management In Flutter-Provider

Let’s dive into the journey on how an app typically gets developed! So usually, apps start off with a very sophisticated product design diagram to tell you how your app is laid out. And this is given to developers on a napkin,

And then the next thing that’s expected is, you build the app!

From Rough Idea on a Napkin to real Application! It’s all about States

You may laugh, but that probably happens more than we’d like to admit.

And with Flutter, that’s not entirely inconceivable in that with Flutter and Flutter’s way of handling composing UIs. You have to handle data flowing through your app, changing state & widgets interacting with other widgets. Getting this wrong at the very beginning is a very costly mistake to make.

With this blog, you’ll be armed with the tools that you need to be able to make an effective choice at the very beginning. So get ready!

Table of Content :

Pragmatic Way of Managing State in Flutter

State Management

Journey through different approaches in state management

Demo Application

Different Flutter State Management Techniques

Resources

Pragmatic Ways of Managing State in Flutter

  • ✅ Understandable/readable / maintainable
  • ✅ Testing
  • ✅ Performance
  1. Understandable/readable/maintainable — Your UI and your app is going to evolve over time. Therefore, the way you manage the state needs to evolve with it. It needs to be flexible and malleable, so you don’t end up with a spaghetti mess, as you iterate on your UI.
  2. Testing — test state when you want to see its effect on UI and vice versa.
  3. Performance — A means by which you can build in the state that will give you good performance, but you always need to be aware of the edge cases.

State Management

If I have a widget, and I want to change its state from somewhere outside of that widget, either from another widget, or from the network, or a system call.

Journey through Approaches in State Management

UI is a function of State

Demo Application

So let’s build a very simple app. It shows the pie chart, and there is a slider, All we want to do is change the state of the pie chart in response to something happening in the slider.

If we look at the very simplified widget tree,we have, basically, only three widgets —

  • Homepage
  • MyChart
  • MySlider

And my slider wants to change the state of my chart.

So we do something that we call in any declarative framework lifting state up. So we lift state up using — my schedule

As soon as slider change —

  • Instead of going to my chart directly, it goes through my schedule. It asks for my schedule and tells it,
hey, you know what? I was tapped, and this value changed
  • My schedule is responsible for notifying its listener. So it notifies my chart,
hey, something changed, and my chart redraws
  • It then goes down to my slider as well and says,
hey, this thing actually changed, and then it changed to my slider

Different Flutter State Management Techniques

  1. Scoped Model
Scoped Model

2. Bloc

BLoC

3. Provider

This is what we are going to discuss in brief !

provider | Flutter Package
English | Português A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider…pub.dev

Add this in your dependencies in Pubspec.yaml. This will automatically get the latest version of provider

provider :

There are three components related to this Provider State Management that we need to understand —

  • ChangeNotifier.
  • ChangeNotifierProvider
  • Consumer

Change Notifier adds listening capabilities to my schedule. So now, we get add listener, remove listener, dispose. And hey, I can notify listeners when things change. Since we added a lifting state up. So we lift state up using my schedule

https://gist.github.com/Anirudhk07/28e0fb792e52e25aa4175d9474452ff6#file-schedule-dart

The Most Important thing is calling notifyListeners(), whenever you change the state data in ChangeNotifier. If you will not call this method, the state change would not reflect in the UI. The method notifyListeners() tells flutter to rebuild the screen which is using that ChangeNotifier.

https://gist.github.com/Anirudhk07/39dc44df9a91e610ce97f308d8873c33#file-chart-dart

It is not necessary that all the part of the UI in MyChart will be using the state data from MySlider , and thus needs to be rebuit. It may be possible that 50% of the UI of any screen, not in our case, not needs to be rebuilt. So, Consumer, which is a widget, allows to observe the state changes from ChangeNotifier in a particular part of UI, and thus only observing part of the UI will get re-rendered.

So with this now MyChart dynamically changes with MySlider !!!

For Disposables / MultiProvider head over here —

disposables | Dart Package
Simple library to manage objects needing to release its own resources. final sink = StreamController(); final…pub.dev

For more information go here

Happy Fluttering !! ❤

Resources

flutter-devs/Provider-State-Management
Provider State Management in flutter using a demo application – flutter-devs/Provider-State-Managementgithub.com

provider | Flutter Package
English | Português A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider…pub.dev

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Firebase Storage in Flutter

Shaiq Khan
-
0
Firebase Storage in Flutter

🤔 Did you know ?

In the old days, if people wanted to store images into Firebase, they would Base64 encode these images into massive strings, and then try and save them that way.

This wasn’t very efficient. But these days, we’ve got Firebase Storage, which lets you store and retrieve large pieces of user-generated content like photos, music, and movies all without needing your own servers.

Sound intriguing?

Stick around & find out how !!

Content

Setting Up!

Firebase Storage

Features of Firebase Storage

Adding Images to Firebase Storage

Linking Firebase Storage with Firestore

Retrieving Images form Firebase Storage

Deleting Images

Resources

Setting Up !

STEP 1 : Go through this on how to add Firebase to your projectLinking Firebase Storage With Firestore

Firebase Storage

STEP 2: Include this plugin in dependencies in pubspec.yaml

firebase_storage :

Firebase Storage lets you store and retrieve user-generated content like images, audio, and video, all without the need of a server.

We all know from experience,that people love to share things about themselves, such as photos, videos, and GIFs that express their feelings.

Features of Firebase Storage

  • Firebase storage API lets you upload your users’ files to our cloud so they can be shared with anyone else!
Sharing of files/images
  • And if you have specific rules for sharing files with certain users, you can protect this content for users logged in with Firebase authentication.
Specific User Rules
  • Security, of course, is the first concern. All transfers are performed over a secure connection.
Secured Connection
  • All transfers with API are robust and will automatically resume in case the connection is broken. This is essential for transferring large files over slow or unreliable mobile connections.
Transfer paused over unreliable connections
  • And, finally, storage, backed by Google cloud storage, scales to petabytes — that’s billions of photos — to meet your app’s needs. So you will never be out of space when you need it.
Storage scales to petabytes !!

Demo Application

We will develop a simple profile application in which we will see how to pick images from the image library and also, see how to store, retrieve & delete the selected images on Firebase. To perform these actions, I shall be using these plugins. Do these plugins in dependencies in pubspec.yaml

image_picker :
firebase_storage :

Linking Firebase Storage With Firestore

We will be importing these packages —

import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';

Adding Images to Firebase Storage

We can use image picker to get our images from gallery.

So to add the selected images to Firebase Storage, we can create a edit icon to save the images to storage uploadPic

https://gist.github.com/Anirudhk07/7098562bad53ecbdb27b566cd54d1810#file-upload-dart

Linking Firebase Storage With Firestore

After onComplete property, we can check if the image were successfully added or not:

https://gist.github.com/Anirudhk07/795ede5a5509c5fcc7444437bad8f1e3#file-link-dart

Saving Images form Firebase Storage

We can use a raised button to retrieve our images that we uploaded which on pressed

RaisedButton(    
child: Text("Save Image"),
onPressed: () async { 
if (_image != null) 
{ 
StorageReference ref = FirebaseStorage.instance.ref();        StorageTaskSnapshot addImg = await ref.child("image/img").putFile(_image).onComplete;  
if (addImg.error == null) { print("added to Firebase Storage");        }     
} }),

Deleting Images

Now, let’s say you have users in your application, each user will have a profile image, if a user gets deleted then you want to delete the image also from Firebase Storage. In that case, you can do the following, for example:

https://gist.github.com/Anirudhk07/bfc2075bba24cce47376cf07cdc8cb6b#file-delete-dart

You can visit the whole code over here —

flutter-devs/Flutter-Firebase-Storage
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build…github.com

Happy Fluttering!

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Resources

firebase_storage | Flutter Package
A Flutter plugin to use the Firebase Cloud Storage API. For Flutter plugins for other Firebase products, see README.md…pub.dev

image_picker | Flutter Package
A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the…pub.dev

flutter-devs/Flutter-Firebase-Storage
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build…github.com

Adding Responsiveness to your Flutter widgets

Shaiq Khan
-
0
Adding Responsiveness to your Flutter widgets

Responsive UI changes the UI of the application screen/widget according to the size of the different mobile screens. Responsive UI is very useful when the same application is made for mobile, web, table, watch(wear apps). Responsive UI rearrange the UI according to the orientation of the device and size.

Need Of Responsive UI :

  1. Highly flexible design
  2. Provides optimized view according to the screen constraints or Orientation
  3. Minimalism in design
  4. Relatively cheap
  5. Easy for SEO

Table of content

Contributing factors used to create responsive UI:-

Using LayoutBuilder

Using MediaQuery

Using AspectRatio

Using FittedBox

Using FractionallySizedBox

Using OrientationBuilder

Github Link

LayoutBuilder

Layout Builder changes the UI according to the size constraints of the device screen. Layout builder takes a builder which return a widget and change the view according to the condition specified by the user.

builder takes a Buildcontext and BoxConstraints.

Here we are using the maxWidth to change the UI of the screen. Whenever the width of the screen is less than 601 or greater than 600 the layout builder will return the VerticalView() widget and HorizontalView() widget respectively.

LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= 601) {
            return HorizontalView();
          } else {
            return VerticalView();
          }},),

BoxConstraints

  1. Creates box constraints with the given constraints.
  2. Click here to read more about the BoxConstraints class.
  3. We can also get the maxWidth, minWidth, maxHeight, minHeight.

We can also change the UI by getting the Height and Width of the device screen. Example:-

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= 601) {
            return HorizontalView();
          } else {
            return VerticalView();
          }},),);}}

Widget VerticalView() {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.blue.withOpacity(0.3),
      elevation: 0,
      title: Container(
        width: 150,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(Icons.favorite_border),
            Icon(Icons.bookmark_border),
            Icon(Icons.star_border),
          ],),),),

body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[Text("Hello"), Text("World")],),),);}

Widget HorizontalView() {
  return Scaffold(
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          NavigationRail(
            backgroundColor: Colors.blue.withOpacity(0.3),
            destinations: [
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('First'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),],
            selectedIndex: 1,),
          Text("Hello"),
          Text("World      ")
        ],),),);}

MediaQuery

MediaQuery is the class that enables us to query the current size of the media. We can use MediaQueryData.size it to get the size of the screen. This will automatically rebuild whenever the MediaQueryData changes.

MediaQueryData mediaQueryData(BuildContext context) {
  return MediaQuery.of(context);
}

Size size(BuildContext buildContext) {
  return mediaQueryData(buildContext).size;
}

double width(BuildContext buildContext) {
  return size(buildContext).width;
}

double height(BuildContext buildContext) {
  return size(buildContext).height;
}
  1. MediaQuery.of(context) returns the MediaQueryData(eg. size of the screen, brightness mode, devicePixelRatio, etc).
  2. MediaQuery.of(context).size.width gives us the width.
  3. MediaQuery.of(context).size.height gives us the height of the current media.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= 601) {
            return HorizontalView(
                height(context) * 0.25, width(context) * 0.25);
          } else {
            return VerticalView(height(context) * 0.25, width(context) * 0.25);
          }
        },
      ),
    );
  }
}
Widget VerticalView(double height, double width) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.blue.withOpacity(0.3),
      elevation: 0,
      title: Container(
        width: 150,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Icon(Icons.favorite_border),
            Icon(Icons.bookmark_border),
            Icon(Icons.star_border),
          ],
        ),
      ),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            width: width,
            height: height,
            color: Colors.orange,
            child: Center(child: Text("Hello")),
          ),
          Container(
            width: width,
            height: height,
            color: Colors.orange,
            child: Center(child: Text("World")),
          )
        ],
      ),
    ),
  );
}
Widget HorizontalView(double height, double width) {
  return Scaffold(
    body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          NavigationRail(
            backgroundColor: Colors.blue.withOpacity(0.3),
            destinations: [
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('First'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),
            ],
            selectedIndex: 1,
          ),
          Container(
            width: width,
            height: height,
            color: Colors.orange,
            child: Center(child: Text("Hello")),
          ),
          Container(
            width: width,
            height: height,
            color: Colors.orange,
            child: Center(child: Text("World")),
          )
        ],
      ),
    ),
  );
}

AspectRatio

Creates a widget with a specific aspect ratio. The aspectRatio argument must not be null. The aspect ratio is expressed as a ratio of width to height. For example, a 19:7 width: height aspect ratio would have a value of 19.0/7.0.

class ApRatio extends StatelessWidget {
  final double aspectRatio;

  ApRatio({@required this.aspectRatio});

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: aspectRatio,
      child: Container(
        color: Colors.orange,
        child: Center(child: Text("Aspect Ratio")),
      ),
    );
  }
}

FittedBox

It creates a widget that scales and positions its child within itself according to fit. The fit and alignment arguments must not be null.

We can also set alignment property to properly align the child(eg. alignment: Alignment.bottomRight or alignment: Alignment(1.0, 1.0))

BoxFit Enums

BoxFit enum
How a box should be inscribed into another box. See also: applyBoxFit, which applies the sizing semantics of these…api.flutter.dev

Card(
  child: Row(children: [
    Text(
      "Without fittedBox",
      style: TextStyle(fontSize: 25),
    ),
    Container(
      height: 200,
      child: Image.network(
          "https://lh3.googleusercontent.com/-svwfeFI7WnY/XvHmVb955QI/AAAAAAAAHvc/K3JwOtoUkNkalWy_CY9DJRgxfKddCUQswCK8BGAsYHg/s0/Untitled-3.png"),
    ),
  ]),
),
FittedBox(
  child: Card(
    child: Row(
      children: [
        Text(
          "With fittedBox",
          style: TextStyle(fontSize: 25),
        ),
        Container(
          height: 200,
          child: Image.network(
              "https://lh3.googleusercontent.com/-svwfeFI7WnY/XvHmVb955QI/AAAAAAAAHvc/K3JwOtoUkNkalWy_CY9DJRgxfKddCUQswCK8BGAsYHg/s0/Untitled-3.png"),
        ),
      ],
    ),
  ),
),

FractionallySizedBox

It creates a widget that sizes its child to a fraction of the total available space.
If non-null, the widthFactor and heightFactor arguments must be non-negative.

Properties

  1. heightFactor (It is the height of the child. Its value lies between 0 to 1. If heightFactor: 0.5, it means the height of the child is 50% of the total height of the screen.)
  2. widthFactor (It is the width of the child. Its value lies between 0 to 1. If widthFactor: 0.5, it means the height of the child is 50% of the total width of the screen.)
  3. alignment ( It defines the position of the given child.)
FractionallySizedBox(
    heightFactor: 1,
    widthFactor: 0.25,
    child: Container(color: Colors.green),

//in a row or column
Container(
    height: 50.0,
    child: Column(children: [
      Flexible(
        child: FractionallySizedBox(
          heightFactor: 1,
          widthFactor: 0.5,
          child: Container(color: Colors.orange),
        ),
      ),
      Flexible(
        child: FractionallySizedBox(
            heightFactor: 1,
            widthFactor: 0.25,
            child: Container(color: Colors.green)),
      ),
      Flexible(
        child: FractionallySizedBox(
            heightFactor: 1,
            widthFactor: 0.15,
            child: Container(color: Colors.blue)),
      ),
    ])),

OrientationBuilder

It Creates an orientation builder. The builder argument must not be null.

The orientation class provides us the landscape view, portrait view. We can use these views to check the device orientation and then we can change the app screen view as follows.

OrientationBuilder(
  builder: (context, orientation) {
    if (orientation == Orientation.landscape) {
      return HorizontalView(
          height(context) * 0.25, width(context) * 0.25);
    } else {
      return VerticalView(height(context) * 0.15, width(context) * 0.5);
    }
  },
),

Closing Thoughts

Responsive UIs are a Quintessential tool in modern applications as they provide us with the ease of customizing the User-Interface of the app as per the device’s screen size and orientation ensuring that the same app can be apparent run into multiple devices without any hindrance as the app will respond by rearranging the UI accordingly. The key purpose of this article is to avail you of an Insight into How we can create Responsive UIs In Your Flutter Widgets.

If you have not used the Responsive Approach, I hope this article has provided you with content information about what’s all about the topic, and you will give it — a Try. Initiate using Responsive UIs for your apps. !!!

Github Link:

flutter-devs/responsive_UI
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

Trace Network Calls In Flutter

Shaiq Khan
-
0
Trace Network Calls In Flutter

Tracing network calls in flutter is not an inbuilt feature where you observe and read your network requests, however, flutter provides testing and observation feature for UI and facilitating testing only for widgets makes it an ill-equipped framework, however, Flutter is now on the ground with DevTools where it provides accessing network request easy but there are also different techniques to do the same. so in order to full fill our requirement we use some techniques to sort it out.

Is Tracing Call Necessary?

As you know to make the request and receiving network call is a necessity for app development as there is nothing possible without exchanging data and it is important to observe data flow that’s why Tracing Network call is Necessary.

How Can We do this?

There are multiple techniques to do it like Devtools, Alice, Flipper, debug Proxy to trace network calls, and today we learn some of them so let’s see how to do it.

1. DevTools :

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release but is under active development. now the question is what we can do with the DevTools, so there are various features we can do with it

  • Inspect the UI layout and state of a Flutter app.
  • Diagnose UI jank performance issues in a Flutter app.
  • CPU profiling for a Flutter or Dart app.
  • Network profiling for a Flutter app.
  • Source-level debugging of a Flutter or Dart app.
  • Debug memory issues in a Flutter or Dart command-line app.
  • View general log and diagnostics information about a running Flutter or Dart command-line app.

How to Use it

for using it in your flutter application first use need to install dev tools in your project for this you need to run this command in your terminal

flutter pub global activate devtools

it installs all required setup for your app, now you need to launch DevTools application server by running the command

flutter pub global run devtools

now you will find something like this in your commands, this is a local server of DevTools where you need to put a link to connect your app

and by clicking on the local server you will find this window

then start your application for debugging by running this command

flutter run

here you will find the link which you need to fill in that browser window which was opened by that local server host

 http://127.0.0.1:50976/Swm0bjIe0ks=/

you need to put this kind of URL into that DevTools folder and you will find this kind of window.

here you can inspect all available features like with tools like performance, debugger, network, and many more. Here it is the network tracing feature of it

here in the image, you can see all the requests and received responses to the app and everything which you need to know can be accessed easily.so it was a general introduction and installing of DevTools and working on it.

2. Alice:

Alice is an HTTP inspector for Flutter and based like Chuck-tools. Alice basically Alice intercepts and exposes the interface of inspecting call details of HTTP calls. you can open the inspector from notification which we receive when we make network calls. If I talk about the best suitability and work easiness then it is best suited for Dio plugin because Dio is the most advanced HTTP client for Dart language however Alice can also be used with other HTTP clients and it gets refreshed every time when new requests come.

How to install it

First, you need to install Alice by adding a dependency in yaml file

dependencies:
  alice:

then run command

$ flutter packages get

and import this into your dart file

import 'package:alice/alice.dart';

now you are ready to use Alice so firstly you need to create an instance of it

Alice alice = Alice(showNotification: true, darkTheme: false,navigatorKey: navigationKey);

there are different options like notification, dark theme, and navigation key you can customize these things according to you as if you want to see the notification when a request comes in then true else false, same as with the dark theme and navigation key is important because it opens the inspector screen let’s see how and where we use navigation key.

Navigation is used in the material widget when you create your own unique global key and use it into the material widget.

GlobalKey<NavigatorState> navigationKey = GlobalKey<NavigatorState>();

after creating a global key we use it into the material widget

MaterialApp(
  navigatorKey: navigationKey,
  debugShowCheckedModeBanner: false,
  title: 'Flutter PWA',
  theme: ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  darkTheme: ThemeData(brightness: Brightness.dark),
  home: HomePage(),
);

now you need to go the methods where you are making network calls if it is Dio then it is very easy to use it.

Dio dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

Dio consists of special feature which allows it to add interceptors with ease and it exposes special interceptors which you need to be pass to Dio instance.

as most of the people generally use HTTP to make network calls so if you want to use Alice with HTTP you need to log every request and response manually.

Here are some examples :

If you’re using HttpClient from dart:io package:

httpClient
	.getUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
	.then((request) async {
		alice.onHttpClientRequest(request);
		var httpResponse = await request.close();
		var responseBody = await httpResponse.transform(utf8.decoder).join();
		alice.onHttpClientResponse(httpResponse, request, body: responseBody);
 });

If you’re using http from http/http package :

http.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    alice.onHttpResponse(response);
});

If you have other HTTP clients you can use a generic HTTP call interface:

AliceHttpCall aliceHttpCall = AliceHttpCall(id);
alice.addHttpCall(aliceHttpCall);

if you have set your notification off and you want to access the inspector then you can use this method to open the inspector.

alice.showInspector();

You can find the complete example from here

alice | Flutter Package
Alice is an HTTP Inspector tool for Flutter which helps debugging http requests. It catches and stores http requests…pub.dev

so if you are done with this installation now its time to test the setup so once we run our app we get the notification in the device and after clicking on it we navigate to the screen where we find

here in the image, it is showing a network request made by the app and you can see the whole status of it by click on it, here when you click on the request you get 4 tabs for different pieces of information

Details of Tabs :

Overview: It shows the general information of HTTP call like methods, endpoint, request, and response time, amount of bytes and duration, connection security.

Request: It shows details of the HTTP request as time, request body and headers, amount of bytes sent, content type,

Response: It shows details of the HTTP response as time, amount of bytes received, status code, response body, and headers.

Error: It shows information about the error if any occurred, this tab will show errors only when you’re using Dio plugin

we also get different options of delete, stats, and save when we click on the toolbar we can use according to need.

Conclusion

In this article, we have discussed two techniques to intercept network call in the flutter where DevTools is official Flutter feature both have there own advantages and disadvantages in DevTools you don’t need to write the code for setup and you can easily do your work and it also provides features to inspect your UI and widgets while in the Alice you need to set up everything but once you get installed it, it becomes easy to use you can inspect each and everything on your respective devices.

So here only two techniques have been explained and all remaining techniques will be covered in upcoming blogs so stay connected with us. Thanks.

If this article has helped you a bit and found interesting please clap!👏

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.💙

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.

1...394041...73Page 40 of 73

EDITOR PICKS

POPULAR POSTS

PAGES

About

Disclaimer

Terms & Conditions

Privacy Policy

Contact

ABOUT US

FlutterExperts are here to share their Flutter knowledge with the developer community.

Contact us: info@flutterexperts.com

FOLLOW US

© Copyright 2024 FlutterExperts. All Rights Reserved.