Blog - Flutterexperts

Flutter and Fuchsia — The next big thing

Featured

-

June 28, 2024

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

Widgets

Shaiq Khan

-

June 28, 2024

0

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)

Design

Shaiq Khan

-

June 28, 2024

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

Featured

Shaiq Khan

-

June 27, 2024

0

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.

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.

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.

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:

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.

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.

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:

GitHub(Open-Source)– https://github.com/flutter-devs
Medium –https://medium.com/flutterdevs
Flutter Themes-https://www.youtube.com/flutterdevs
20k Flutter Community– www.linkedin.com/showcase/flutterdevs/

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!.

State Management In Flutter-Provider

Statemanagement

Shaiq Khan

-

June 27, 2024

0

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

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.
Testing — test state when you want to see its effect on UI and vice versa.
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

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

Scoped Model

2. 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

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

Firebase

Shaiq Khan

-

June 27, 2024

0

🤔 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!

And if you have specific rules for sharing files with certain users, you can protect this content for users logged in with Firebase authentication.

Security, of course, is the first concern. All transfers are performed over a secure 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.

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

Widgets

Shaiq Khan

-

June 27, 2024

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 :

Highly flexible design
Provides optimized view according to the screen constraints or Orientation
Minimalism in design
Relatively cheap
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

Creates box constraints with the given constraints.
Click here to read more about the BoxConstraints class.
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;
}

MediaQuery.of(context) returns the MediaQueryData(eg. size of the screen, brightness mode, devicePixelRatio, etc).
MediaQuery.of(context).size.width gives us the width.
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

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.)
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.)
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

Networking

Shaiq Khan

-

June 26, 2024

0

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!.

Local Push Notification in Flutter

Packages and Plugins

Shaiq Khan

-

June 26, 2024

0

In today’s world if we look at any live app in the market has the web notification or local notification functionality. This shows the importance of integrating our app with notification functionality. Local Notification is widely used to inform the user about any information or a way to alert the user in realtime without the use of the internet. These notification are pre-scheduled by the developer according to the various actions performed by the user in the app.

Table of Content

Need of Local Push Notification

How to implement Local Notification in Flutter?

Creating a Flutter Local Notification object

Creating initState

Simple Notification

Schedule notification

Big Picture Notifications

Media Notification

Cancel Notification

Github Link

Need of Local Push Notification?

Scheduled notification.
Setting Up the project
No web request is required to display Local notification.
No limit of notification per user.
Originate from the same device and displayed on the same device.
Alert the user or remind the user to perform some task.

How to implement Local Notification in Flutter?

Thankfully in flutter, we had a package to do it. This package provides us the required functionality of Local Notification. Using this package we can integrate our app with Local Notification in android and ios app both.

flutter_local_notifications | Flutter Package
A cross platform plugin for displaying and scheduling local notifications for Flutter applications with the ability to…pub.dev

flutter_local_notifications: ^latest version

install this package into your pubspec.ymal file and don’t forget to import

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

Setting Up the project

Edit your AndroidManifest file

Add the following permission to integrate your app with the ability of scheduled notification.

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

Add this inside the application section

<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED"></action>
    </intent-filter>
</receiver>
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />

Add vibration permission

<uses-permission android:name="android.permission.VIBRATE" />

Creating a Flutter Local Notification object

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

flutterLocalNotificationsPlugin is our object that we will use to perform various operations.

Creating initState

void initState() {
  super.initState();
  var initializationSettingsAndroid =
      AndroidInitializationSettings('flutter_devs');
  var initializationSettingsIOs = IOSInitializationSettings();
  var initSetttings = InitializationSettings(
      initializationSettingsAndroid, initializationSettingsIOs);

  flutterLocalNotificationsPlugin.initialize(initSetttings,
      onSelectNotification: onSelectNotification);
}

AndroidInitializationSettings is a class that initializes the settings for android devices. This class is used to provide an icon for our notification.
IOSInitializationSettings plugin used to initialize the settings for ios devices.
InitializationSettings plugin used to initialize the settings of each platform (Android and ios).
initialize method is used to set the setting according to the platform of the device. If the device is android then the app will work according to the android setting specified and if the platform is ios then it enables all the ios settings. It also has onSelectNotification property which performs the task given on pressing the Notification.

Future onSelectNotification(String payload) {
  Navigator.of(context).push(MaterialPageRoute(builder: (_) {
    return NewScreen(
      payload: payload,
    );
  }));
}

NewScreen Widget is a new screen that occurs when the user presses the notification.

class NewScreen extends StatelessWidget {
  String payload;

  NewScreen({
    @required this.payload,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(payload),
      ),
    );
  }
}

Simple Notification

showNotification() async {
    var android = AndroidNotificationDetails(
        'id', 'channel ', 'description',
        priority: Priority.High, importance: Importance.Max);
    var iOS = IOSNotificationDetails();
    var platform = new NotificationDetails(android, iOS);
    await flutterLocalNotificationsPlugin.show(
        0, 'Flutter devs', 'Flutter Local Notification Demo', platform,
        payload: 'Welcome to the Local Notification demo'); 
  }
}

AndroidNotificationDetails is a class that contains the details about the notification on Android devices such as priority, importance, channel name, channel description, channel id, sound, vibration, etc. Similarly, IOSNotificationDetails it contains the ios notification details. It is not necessary to provide the details of android and ios, if your app is specific t the android users then you can pass null in the NotificationDetails in ios section. show() method automatically checks for the available platform whether it is ios and android. If the platform is android then it sets the AndroidNotificationDetails as the notification details. show() method takes the id, title, body, NotificationDetails, payload is a string that we will use to pass it as an argument in the onSelectedNotification function to display some text in the new screen related to the type of notification clicked.

Schedule notification

scheduleNotification is a notification which used to perform a scheduled task. This notification occurs at a specified time.

Future<void> scheduleNotification() async {
  var scheduledNotificationDateTime =
      DateTime.now().add(Duration(seconds: 5));
  var androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'channel id',
    'channel name',
    'channel description',
    icon: 'flutter_devs',
    largeIcon: DrawableResourceAndroidBitmap('flutter_devs'),
  );
  var iOSPlatformChannelSpecifics = IOSNotificationDetails();
  var platformChannelSpecifics = NotificationDetails(
      androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
  await flutterLocalNotificationsPlugin.schedule(
      0,
      'scheduled title',
      'scheduled body',
      scheduledNotificationDateTime,
      platformChannelSpecifics);
}

Big Picture Notifications

Future<void> showBigPictureNotification() async {
  var bigPictureStyleInformation = BigPictureStyleInformation(
      DrawableResourceAndroidBitmap("flutter_devs"),
      largeIcon: DrawableResourceAndroidBitmap("flutter_devs"),
      contentTitle: 'flutter devs',
      summaryText: 'summaryText',
   );
  var androidPlatformChannelSpecifics = AndroidNotificationDetails(
      'big text channel id',
      'big text channel name',
      'big text channel description',
      styleInformation: bigPictureStyleInformation);
  var platformChannelSpecifics =
      NotificationDetails(androidPlatformChannelSpecifics, null);
  await flutterLocalNotificationsPlugin.show(
      0, 'big text title', 'silent body', platformChannelSpecifics,
      payload: "big image notifications");
}

Media Notification

Future<void> showNotificationMediaStyle() async {
  var androidPlatformChannelSpecifics = AndroidNotificationDetails(
    'media channel id',
    'media channel name',
    'media channel description',
    color: Colors.red,
    enableLights: true,
    largeIcon: DrawableResourceAndroidBitmap("flutter_devs"),
    styleInformation: MediaStyleInformation(),
  );
  var platformChannelSpecifics =
      NotificationDetails(androidPlatformChannelSpecifics, null);
  await flutterLocalNotificationsPlugin.show(
      0, 'notification title', 'notification body', platformChannelSpecifics);
}

Cancel Notification

cancel() removes the notification of the given id.

Future<void> cancelNotification() async {
  await flutterLocalNotificationsPlugin.cancel(0);
}

Conclusion

Local push notification is extremely useful to provide notification or alert about the important task. Local notification can be implemented without the internet. The Scheduled Notification is extremely powerful as they are very fast and very accurate and notify the user as per the time scheduled by the user.

If you are making a reminder app or todo app, then you should use Local Notification. 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 Local Push Notification for your apps. !!!

Github Link

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

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

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!.

Hybrid Apps-The Future Of Mobile Technology?

Featured

Shaiq Khan

-

June 26, 2024

0

Hybrid Apps-The Future Of Mobile Technology?

Mobile apps have been growing Ginormously since their inception. Every day we come across the news of some new app being launched in the market. Though this world of app development is very exciting, sometimes it’s confusing too especially when it puts a question before you while development- whether to go for a native app or hybrid app? Choosing from these two can be very challenging as both of these programming languages — Hybrid and Native, come with their pros and cons.

Before getting into the nitty-gritty of Hybrid app technology .
Let’s see what is a hybrid app, the buzz which is creating in the market, and how it will be a big differentiator in your business.

What are Hybrid Mobile Apps?

The combination of native as well as mobile apps is called the Hybrid apps. Just like native apps, they have to be first downloaded in an app store and then the app can utilize any of the features which a device has. As far as the web app part is considered, they rely on HTML being provided in a browser embedded within the app.

A hybrid app consists of an HTML5 web app within a native ‘wrapper.’ This is a mobile app written using HTML5, CSS3, and JavaScript, and then compiled into native iOS, Android, or other mobile platform using wrapper technologies.

Hybrid apps combine the benefits of the website and the app. Some programmers choose hybrid apps to conveniently incorporate device features such as push, camera, or GPS notifications. They have the extra benefit of obtaining Google’s and Apple’s platform’s customer base since apps are available through the App stores. Because they’re still basically web programs, they’re more economical to develop but might require experts that have more specialized knowledge of the different interfaces and features of their phone.

Why Hybrid Apps are set to Trump Native Apps in the Future?

:: App Store Limitation

Today, releasing a native mobile app involves packaging the code, submitting it to the app store, and waiting for it to be approved. The entire process can take anywhere from two to seven days. This is an eternity in the mobile world. Mobile app developers want to be able to update their mobile apps like their web apps, multiple times a day if necessary. This is not possible with the limitations of app stores, and hybrid apps are the way out.

:: Code Reuse

As most apps have an iOS and an Android version, they are developed using each platform’s preferred programming language — Objective-C or Swift for iOS, and Java for Android. Hybrid apps, on the other hand, let you build mobile apps with the same languages your developers are already familiar with — HTML, JavaScript, and CSS. You can write code once, and deploy it across all your mobile platforms. Mobile app testing equally benefits because you don’t need to write unique test scripts for each app type. Testing against a single codebase also reduces the testing infrastructure you need and simplifies the QA process. With the increasing fragmentation in device types and OS versions, this is becoming a necessity for mobile development.

:: DevOps for Mobile

Finally, hybrid apps let you extend DevOps to your mobile apps, too. They let you go from mammoth quarterly app updates to a bi-weekly cycle, and eventually let you update as frequently as your web app — which is close to impossible with native apps today. To update at this frequency, you’ll need to automate the two key parts of your continuous integration (CI) process — builds and tests. This is where tools like Git, Jenkins, and Appium have a key role to play. When well-integrated, they can let you focus exclusively on developing and testing your app, rather than worrying about mobile platforms’ norms. This gives you the confidence to release multiple times a day, and take ownership of your mobile development process.

Flutter — The revolution in Hybrid Technology

This free and open-source platform allows the developers to build highly-interactive native interfaces on iOS and Android in record time. Its ability to speed up the entire app development process assists the developers in reaching a wider base of audience. let’s understand how this SDK, Software Development Kit, will prove to be beneficial for the app development industry as well:

:: Faster App Development Process

Flutter supports both IOS and Android, making it a feasible option for cross-platform app development. It allows the developers to modify widgets and build a highly engaging native interface. Also, the immensely productive rendering engine makes it a great choice for developing native platforms.

:: Striking User Interface

Having an eye-catching user interface is always a big plus for a mobile app. Flutter features Material Design and Cupertino for Android and iOS apps, respectively, that assist the app developers in building highly engaging apps. These are set of visual and motion-rich widgets that make the app look beautiful and interactive on both platforms. These apps are easy to navigate and extremely user-friendly.

:: Accessible Native Features and SDKs

Flutter further makes your app development journey delightful through native codes, third-party integrations, and platform APIs. You can easily access the native features and SDKs on both platforms and reuse the widely-used programming languages for IOS and Android such as Swift and Kotlin.

:: Highly Reactive Framework

With Google Flutter, you can easily modify the interface by changing the variable in the state. Consequently, all changes will reflect in the UI. Also, Flutter makes it easier and quicker to set up the application compared to React Native.

So, Will Hybrid Apps Replace Native Apps?

We are at a stage of infancy when it comes to choosing between platforms (there are only four — Windows, HTML, iOs, and Android). To conclude, hybrid apps are a much cost-effective way for a company to port over their app. Their technical person does not need to learn a new language or even hire someone to do it.
But on the other side, the user experience in native apps is something that the company cannot ignore. For example, iOS users and developers know the apps inside out. Without customizing the UX for each platform, the apps won’t work the way they worked before, thus, the lack of functionality and eventually losing their app users.

If you are planning to have your own mobile application, website, custom web app designed by a professional design team, 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 to reach out to us .

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!.