Google search engine
Home Blog Page 38

Building Your Startup App In Flutter? — Everything you Need to Know

Shaiq Khan
-
0
Building Your Startup App In Flutter? — Everything you Need to Know

You are reading this blog for one of the two major reasons :

First, you have an amazing new app idea for your start-up and you are looking for a reliable & cost-effective app development solution.

Second, you are a tech-geek and you’re hunting for an informative article to learn more about Flutter.

In any case, the blog is going to be beneficial for you. So, let’s dive straight into it.

Mobile Apps have burgeoned from a simple tool for simplification of our daily life to a major business requirement and a growth aspect. Earlier in the days, we had a handful of technologies or frameworks for web applications like PHP, CodeIgniter (to name a few). And talking about mobile applications for a native app, Java and Objective C, and then moving today it’s Kotlin for Android, Swift for iOS, etc.

But today, we have new, more advanced, more efficient frameworks that keep coming every now and then. And as a product owner, being asked to choose the right technology/framework for your product development can be draining and confusing, whether it’s web or mobile apps.

The reason for writing this article is to help you decide why to choose Flutter for your new app idea. I understand that there are a lot of factors to consider when choosing to invest in your product, from a business standpoint. So, how do you decide?

  • Here’s what I will try to help you with:
  • Understand what Flutter is.
  • Why is it there so much enthusiasm surrounding Flutter for both Startup funders and app developers.

Why is this the best fit for your needs

Some existing examples or case studies of the world’s leading brands building their apps in Flutter

We have some brilliant frameworks available for building any kind of mobile application, be it a Native or Cross-Platform app. But somehow, Flutter has been leading Native and Cross-platform game since its inception. Let’s see why?

Flutter — The Framework that revolutionized App Design

Flutter, the mobile application framework, was released in May 2017 during the Google Developers conference. It is a Software- development kit that helps developers in making high-performing apps for Android and iOS platforms by using a single codebase.

Not just that, In such a short span of time, Flutter has become so popular that it has already outgrown Xamarin by Microsoft, React Native by Facebook, and Angular.

With Flutter, you just need to learn Dart to build apps for Android as well as iOS. No other languages like Kotlin, java, Swift. Only Dart.

Why is Flutter a Big Deal?

We have all seen a hush-hush about Flutter. Everyone is talking about it. More and more development companies are using Flutter for their mobile application needs and it’s exponentially increasing.

Let’s take a look at a few of many reasons why Flutter overgrows every other Framework out in the market.

Amazing Widgets to fall for — Probably the first thing that makes a developer fall in love with flutter. The wide range of widgets cataloged by Flutter makes it possible to create aesthetically pleasing app UI. The inbuilt IntelliJ Plugin, rich animations, and graphic motions are few of the things Flutter helps us to create tremendous user interaction. The user experience that can be achieved by Flutter is excellent, static UIs never achieve this.

And don’t worry about the native features like navigation, scrolling, etc. because flutter comes with the support of platform differences. Customizing the widgets can be developed based on user requirements.

Fast Development — One of the main features of Flutter is it’s Hot Reload feature. Are you wondering what Hot Reload is? Let me tell you.

Hot Reload- Any changes made in the code of the app are instantly visible to the developers on their screen without having to recompile the code, which in turn saves a lot of time for both, the developer and the app owner.

Single Codebase — Flutter is the only framework that provides reactive views without requiring the javascript bridge, while others fail on the reactive programming part. As a result — it develops cross-platform apps that are competitive to native apps when it comes to Functionalities, features, and UI/UX.

Now, I know some of you might also be running a start-up and want to turn your amazing business idea into a mobile app. Let’s talk about the things from an Appreneur’s perspective:

What does your app need to stand out in the Mobile App industry?

Considering that almost 3.5 billion smartphones and tablets are being used across the globe, the mobile app industry is growing at an exponential rate. And in a sea full of users the fact that 300 million start-ups roll out every year makes you want to stand out in the crowd. So what does your app need to achieve that and how does Flutter help in this? Let’s find out…

  • Strikingly Interactive Designs — The most crucial thing for any type of business is to attract investors so as to acquire the funding that they desire. As we already talked about, Flutter is flooded with UI features, interactive designs, motion graphics, animations, and many more which draws in customers and investors alike.
  • Strong Backend — Firebase is at the heart of Flutter. Firebase is Google’s mobile platform that provides a bunch of services, from cloud storage to real-time databases and Hosting & many more. Firebase is the absolute key to startup success.
  • Pocket Friendly — Running a startup, the biggest challenge that comes is the budget. The startup owners always want to look for options that won’t make a hole in their pockets. And when it comes to developing an app, this plays a major role as well

As we already know, Flutter uses a single codebase for developing apps for two different platforms. It is clear that you don’t have to hire two different specialized engineers to make the app for both platforms. It will save you money.

Some Great applications built with Flutter

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

Some of the apps that have really Standout are :

Reflectly

Insights: 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 ‘app of the day’.

Hookle — Social media Manager for Small Businesses

Insights: Hookle is a social media management tool that helps you to create, manage and schedule posts along with track features for engagement received that is built using Flutter

Features of the Hookle app include:

  • Customization of posts for the different social media channels.
  • Monitoring all the activities on different social media swiftly and through a single glance.
  • The composition as well as posting of different kinds of content in the different social media.

The New York Times

Award-winning independent journalism, expert reporting, and multimedia storytelling with the NYTimes app. Flutter helps bring the popular Ken Ken puzzle to life on Android, iOS, Mac, Windows, and the web.

Flutter — Paving Paths For A Way To The Future

Flutter has become a really powerful framework and can’t be ignored anymore. Even if you are a professional native Android or iOS developer, you should definitely try out Flutter and Dart to understand their true powers. Seeing all this one thing is assured that Flutter has great potential that will be further enriched and the difference it can bring in the table by giving a boost to your workflow and business growth as a lot of time can be saved that will contribute to developing and perfecting your app. With Flutter, the possibilities are practically endless, so even super extensive apps can be created with ease.

At FlutterDevs, We have been working on the Flutter since its Alpha version which has definitely given us an edge over the others as we’ve been fondling with flutter from the very beginning. We have adopted a design first attitude which has always led to delivering the highest quality mobile applications. FlutterDevs believes in giving back to the tech community that’s why we have been adding:

  • 90+ Open Source Contribution on GitHub
  • 100 + Technical Blogs on Medium
  • Brainstorming every day with a strong 16k+ LinkedIn Followers
  • Regular meetups around the cities to learn and grow as a community.
  • FlutterDevs Startup Incubator Programme is a platform being Initiated by FlutterDevs to avail a platform for newly emerging startups keeping in mind the factors needed for the proper functioning of a young emerging Business availing all the facilities under a single roof.

know more about the program:-

FlutterDevs at a Glance!

To strengthen you across various dimensions. Here is a showcase describing our flutter journey so far:

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

FlutterDevs

Flutter for MVP Development- Why it’s the best bet for startups

Shaiq Khan
-
0
Flutter for MVP Development- Why it’s the best bet for startups

Every conversation discussing Time-Saving Mobile App Development strategies have been revolving around Flutter and Minimum Viable Product strategy. While launching a new app, the most prioritized factor usually turns out to be the product development time.

It is one of the quickest and most utilized approaches for startups around the world to validate their business idea. Employing an MVP to test their idea into the market is a tremendous quickstep to avoid potential disappointment.

In this blog, we will dive deep into the strengths of Flutter and MVP, and see how they complement benefitting each other. But before that let us see what makes them so important for the app industry.

What makes MVP necessary?

MVP can be simply defined as the most basic version of the app that solves the problem. MVP holds a massive prominence in the app industry, especially among startups that are looking to validate their ideas in the market.

The idea behind MVP is simple– create a minimal version of your app with a set of unique features and share it with a pool of users to gauge their responses towards the offerings. What follows then is making the app according to the user’s feedback.

Moreover, validating a business idea becomes more comfortable when you have an MVP of your product. Statistics reveal that almost 70–80% of startups fail within 20 months of their first financing because of poor market research.

An MVP works as a tool that realizes the true potential of a thought or idea. Accordingly, you can plan suitable directions to steer your business.

There are a lot of benefits that come with characteristics of MVP –

Testing the Idea at an early stage

For an entrepreneur, their idea is the best idea — a masterpiece. There is no denying the fact that every business owner believes their idea to guarantee success in the market.

But is it enough to make that amazing idea success?

The best way to know that is by introducing an MVP in the market for a set of prospective users to use. The benefits of MVP is not just presenting your idea but also to gain feedback on the proposed features or solutions& doing market research.

Reduced Cost to Development

Something that I can tell you being a part of an app development company is that the more features and functionalities you add in your application, the greater will be the resources that will go behind its development, which means the cost will be greater.

What this means is that rather than developing a full-fledged app, the cost of MVP will certainly be less than half.

Save Time & Effort

One of the most important things to focus on for any startup besides the low development cost is the low time and effort investment. An MVP will help you determine if the efforts are getting their expected results or not. This, in turn, will directly help the startups to channel their efforts wisely.

Approaching to the Potential Investors

Getting investors interested in your vision or your idea is not easy. But what helps, in this case, the most is to enter the door with a physical functional model of your app compared to the diagrammatic representation. When an investor sees an MVP covered with user engagement graphs, chances of them getting hooked to the app are greater compared to giving just an idea.

Companies that have successfully implemented MVPs

It is interesting to study how some of the biggest technology giants in the app industry have successfully implemented MVP. Here are some of them:

Why is Flutter an Eminent part of the App Industry?

What is Flutter? Why Flutter? These are some of the basic and common questions everyone who is thinking of building their app is asking around. Let’s answer today —

Flutter is an astonishing software development kit introduced by Google a few years back. Flutter was basically invented with one thing in mind- giving the world of apps something that it’s been missing for a long time now. There are a series of benefits that come attached with Flutter which makes it an ideal cross-platform mobile app development framework. Here are some:

Hot Reload- Any changes made in the code of the app are instantly visible to the developers on their screen without having to recompile the code, which in turn saves a lot of time for both, the developer and the app owner.

Reduced code- Flutter uses Dart programming language. Dart is well known for its low line of code as compared to any other language in the market.

Customized Widgets- Flutter comes bundled with not just Native like widgets but also with the scope of customizations according to the user needs.

Now that we know what both Flutter and MVP offer to the app industry individually, let’s take a look at how they both compliment each other and how it benefits to make an MVP with Flutter.

Why chose Flutter for MVP?

let’s take a look at how MVP with Flutter the best bet for any startup —

Attractive Designs That Draw Investors

Investors are the most essential for any business or startup. To attract an investor your MVP must have an engaging design. Flutter comes with a ginormous collection of UI features and interactive designs, that can attract an investor.

The Flutter SDK supports Material Design, Cupertino, motion, and visual oriented widgets for both Android and iOS. Flutter supports widgets that are accessible and allows the developers to customize the widgets to fit their design needs.

Accelerated App Development Process

Developers take significantly lesser time to build an MVP with Flutter. All thanks to the Hot Reload feature that comes along with SDK. This feature makes it much easier to view the changes made in the app simultaneously. This saves a lot of time in development.

Overall, The experimentation process becomes faster, as the newer version does not entirely have to be coded.

Creating Cost-Effective Applications

Cost limitations used to be one of the biggest hindrances for any company launching a mobile application. Flutter, however, comes as a solution by supporting the app development that gets love on Android and iOS through a single code base. This turns out to be easing the process of working on both platforms at a low development cost.

Flutter — The Best Bet For Startups

Building high-performance and exceptional mobile apps need a good amount of support from SDKs like Flutter.

The reason behind a startup’s choice to go for Flutter doesn’t end at these. There are constant additions that are being made in the platform to make it the ultimate choice for any startup.

At FlutterDevs, We have been working on the Flutter since its Alpha version which has definitely given us an edge over the others as we’ve been fondling with flutter from the very beginning. We have adopted a design first attitude which has always led to delivering the highest quality mobile applications. FlutterDevs believes in giving back to the tech community that’s why we have been adding:

  • 90+ Open Source Contribution on GitHub
  • 100 + Technical Blogs on Medium
  • Brainstorming every day with a strong 16k+ LinkedIn Followers
  • Regular meetups around the cities to learn and grow as a community.
  • FlutterDevs Startup Incubator Programme is a platform being Initiated by FlutterDevs to avail a platform for newly emerging startups keeping in mind the factors needed for the proper functioning of a young emerging Business availing all the facilities under a single roof.

know more about the program:-

FlutterDevs at a Glance!

To strengthen you across various dimensions. Here is a showcase describing our flutter journey so far:

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

FlutterDevs

Firebase Analytics In Flutter

Shaiq Khan
-
0
Firebase Analytics In Flutter

Analytics — We all know they’re important building a successful app , which is why there are many different kinds of analytics tools for app developers to use. There are in app behavioral analysis which measures who your users are and what they’re doing & so on . Then you’ve got the attribution analytics which you can use to measure the effectiveness of your advertising and growth campaign , not to mention push notifications and crash reporting.But quite often this work is being done by completely different analytics libraries , which means you’ve got your reports living in various tools across the web and trying to understand trends across these different reports much less get them to talk to each other , isn’t always easy !

Google Analytics for firebase is the place where all the data that mobile developers’ need is at one place !

Content

Setting Up

Walking through Dashboard

Events in Analytics

User Properties

Audiences

Wrap Up !

Setting Up

STEP 1 : Go through this on how to add Firebase to your project

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

firebase_analytics: ^latest

STEP 3: Since firebase analytics is not retroactive meaning , events aren’t logged immediately in Dashboard , it might take upto 24 hrs ! So before running your app , you should include debugging which will enable DebugView in firebase console using this command —

app_name should be the name of your app !

adb shell setprop debug.firebase.analytics.app com.example.app_name

This will enable DebugView in your firebase console.

Walking through Dashboard

Simply by installing the Firebase Analytics SDK, Analytics automatically starts providing insight into your app (after some hours)

Dashboard of Firebase Analytics
  • Demographic Information — who your users are.
  • Retention — how regularly they use your app.
  • Engagement — how much time they spend & on what
  • Average Revenue — shows how much they have spent , if your app supports in app purchases

These can include common events that Google Analytics for Firebase has already defined, like when your users add an item to their cart.

To better understand the features of dashboard , visit demo project here.

But not all apps are alike. And you can get detailed information about what your users are up to by logging events specific to your app.

Events

The lifeblood of Google Analytics for firebase is events.User research studies and focus groups , they all have their place but if you want to find out how people are really interacting with your app where they’re spending their time what they’re interacting with and where they’re getting stuck you’re gonna want to measure that using an analytics library like say Google Analytics for firebase. Firebase events help you understand what is happening in your app. Let us now look at some of the events —

  1. Default Events

Default events are added automatically , so all this host of events are being logged automatically for you so that you don’t have to do it for yourself and it comes right out of the box. Here’s a list of some default event. To get more details , head here.

Automatic events are logged in firebase automatically

first_open : Google Analytics will will log a first open event each time a new user starts using your app.+

in_app_purchase : if your app offers in-app purchases , automatically an in-app purchase event will be logged for you which will contain the value of the purchase and the product that was purchased.

user_engagement : Analytics will also track user engagement and sessions using the user engagement and session start event so you can track how much time people are spending engaged with your apps

app_update : Google Analytics can track events which help you understand who’s updating to the latest version of your app who’s uninstalling on Android.

crashlytics : an app exception event will be logged for you so that you can tell which crashes or which users are leading to crashes

AdMob : if you’re integrated with AdMob we log a trio of events to help you understand which users are seeing impressions and clicking on ads and being exposed to your ads in your app next by virtue of the integration with firebase Cloud messaging this trio of notification events is logged so you can help it can help you understand how users are reacting to responding to push notifications that you send to the app so all this host of events are being logged automatically for you so that you don’t have to do it for yourself and it comes right out of the box if you need more than just these automatic events we have a long list of suggested events for

2. Suggested Events

If you are actually logging these suggested events as prescribed you will be able to get reporting in a specific manner for many of these so there’s a nice little incentive there to using these suggested but you can add custom events too , to better understand even the most detailed interaction.There’s a long list of suggested events ,to get this comprehensive list head over here.

If you have an option , do prefer these events over custom events

List of some suggested events

3. Custom Events

Of course , if your app offers any features that can be neatly mapped any those suggested events you’re always welcome to use firbaseAnalytics API to log some an event with a custom name. We will go through this in brief further.

FirebaseAnalytics().logEvent(name: 'name',parameters:null);

So are you ready to add some analytics into your iOS/android app ?

Stick around and find out how !

We will design a simple app to log events like —

  • Log In , Log Out , Sign Up.
  • Whenever a user chooses Ice Cream or Chocolate.
  • Whenever the user rates using the slider.
Product A or Product B ?

I have created two button press events. Whenever a user selects one of those , that activity is logged into Firebase Analytics. We will use Custom Events to log our button press events.

LogEvent

Since this is a class method we don’t need to bring up a shared instance or anything like that.

Parameters —

  • name : name of the event which will appear in your DebugView . If I were using a predefined event I would be entering a constant here instead of a string they all begin with AnalyticsEvents() . Check them in the documentation

Note : Name must consist of only letters, digits or _ (underscores). Max length 40 . Otherwise It will not be logged.

  • parameters : Logs a custom Flutter Analytics event with the given [name] and event [parameters]. Parameters contextualize that event to give you more context around what’s going on in your app.

Now let us check some of the Log Events which I included —

Button Press Event :

onPressed: () {
FirebaseAnalytics().logEvent(name: 'A_Product',parameters:null);
},

Slider Event :

Remember , log slider events at onChangeEnd , otherwise you would end up having dozens of log every time somebody adjusts the slider and that’s probably not what you want.

onChangeEnd: (_value) {
FirebaseAnalytics().logEvent(name: 'Slider_Change',parameters: {'Value':_value});
},

NOTE : If your debug view is set up as mentioned from above , you should be able to see the events in the DebugView of firebase like shown below —

Logged Events

  • Session_Start (Default Event)
  • Screen_View (Default Event)
  • Login (Custom Event)
  • A_Product (Custom Event indicating the product selected)
  • Slider_Change (Custom Event indicating the user feedback)

If you have crashlytics integrated , analytics will show you where your user’s app is getting crashed!

Errors

Now , as I mentioned before that name parameter can only have at max 40 characters , but what if I make it greater than 40. This is what DebugView of firebase will show —

You can view errors in your app using debugView

For more detailed demo watch this—

Congratulations ! You have now logged your events “lifeblood of Google Analytics” to firebase analytics

User Properties & Audiences :

So how can you use custom user properties to better understand your results in Google Analytics for Firebase?

Let’s find it out !

Google Analytics for Firebase is all about recording events that happen within your app and sending them over to the Firebase console so that you can get some information about them.

And while seeing this data in aggregate is nice, sometimes you want to break this down into more specific user segments. I mean, sure, it’s great to see people are visiting your in-app store.But who are these people?

Are they tablet owners, new users, Indians ?

Knowing who these people are can make it easier for you to personalize your app, create better user experiences, and get better results. If you have ad support enabled, you can even get the demographic information such as gender & age.

But very often your app will have its own specific user properties that you’ll want to use to filter your data !

Let’s now set some user properties for real ,

Remember the app we made for event logging , we would modify the same app to set some user properties !

Product A or Product B ?

Well, our marketing team has this theory that cat people are more likely to choose chocolate (product B) than dog people. And they want to back up that claim with data. Let’s see how —

I have created an Alert Dialog which asks the user whether they are cat people or dog people

So what we want to do in the results is store that information in a user property.

setUserProperty(name : " ", value : " ");

If cat is selected :

FirebaseAnalytics().setUserProperty(
name: "dog_or_cat", value: "cat_person");

we can similarly do for dog !

NOTE : user properties are not retroactive. Once you set a user property for a particular user, any and all future events will be associated with that property. But don’t expect that previous events will be updated.Those remain unchanged.

But remember we also have to register this user property with a Firebase console so that it knows to filter future reports based on this value.

STEPS :

  1. Go to User Property
  2. Click on New User Property
  3. Add User Property Name & Description
Setting the user properties dog_or_cat

Since Firebase Analytics is not retroactive , only the future events will now be filtered based on this user property !

After some hours ……

Steps

  1. Go to Events
  2. Now select the event on which you want to predict , in our case we will select B_Product (chocolates)
  3. Click on Add filter
  4. Now follow as shown below
  5. Select Filter & Date

Results :

Note : Always look for count per person because number of users in this case is only 1 but in real life scenarios number of users will be much larger , so event count can mislead you !

Dog Person = 14😕

Look for Count per Person (dog_Person, B_Product)

Cat Person = 45 !!🤩

Look for Count per Person (Cat_Person, B_Product)

So our marketing folks were right !!

“Cat_Person tends to select B_Product more often !”

You can now use this data to target a segment of people. Let us see how !

Audiences

Audiences are groups of users you define in firebase analytics that can be used in a number of different ways —

  1. You can filter analytics reports and dashboard against particular audience
  2. You can send firebase notifications to a specific audience you can send different
  3. Remote config data to different audiences
  4. You can target these audiences in re-marketing campaigns like AdWords

NOTE:

audiences are not retroactive when you create an audience it will initially be empty.

Audiences can help you segment your analytics data to get better insights into how different segments of your users use your app differently. Let us take an example.

So our marketing team is very interested in catpeople who use the slider to rate product > 50 here. They think they’d be the perfect audience to upsell our new product of Cake too.

Audience

So we are going to want to create an audience of these people which we’ll do by combining the adjust slider event value >50 & with the dog or cat person user property.

STEPS :

  1. Open Audiences in Analytics
  2. Click on create new Audience
  3. Follow this —
Creating Audience

4. Add parameter Adjust slider value > 50

Trust me when this app gets the more users it’ll be a lot more exciting so once this audience gets beyond ten users I can start using it to filter my reports and notifications or target via my AdWords campaigns and then I can finally start selling these cat people my cake upgrade

This is enough to get you started with audiences , audiences work best if you have a bunch of them already defined when you incorporate analytics into your app so start thinking about what audiences make the most sense for your app.

You can now target your cat people to sell your new products !

Wrap Up !

Observe & Analyze — This helps us observe & analyze using Firebase Analytics ,Crashlytics & Performance monitoring to see what our users are doing & discover issues before they reach everyone.

Hypothesis — we can improve the experience with them using predictions to segment the users that might be churning or spending more money 🤑

Experiments — we can run experiments on users using A/B Testing , targeting remote config & messaging

We’ll be able to analyze the changes we have made based on what users like and repeat the cycle all over again !

Now that we have added Firebase Analytics to our app , when people all across the world come to our app they will have a smooth & enjoyable experience !

Happy Fluttering !

— Anirudh Kolwadkar

Resources

flutter-devs/Firebase_Analytics
Integrating firebase analytics to Superpower your apps – flutter-devs/Firebase_Analyticsgithub.com

Google Analytics | Firebase
Google Analytics is a free app measurement solution that provides insight on app usage and user engagement. At the…firebase.google.com

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

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

Adobe XD In Flutter — Early Preview

Shaiq Khan
-
0
Adobe XD In Flutter — Early Preview

Google created ample excitement in the developers community by showing a quick demonstration of Adobe XD design tool announcing their collaboration with adobe to create User Interface towards Flutter’s Idea to provide a rich canvas in creative expression to build Flutter apps close to native-like performance with screen limiting the technical boundaries between developers and designers.

XD to Flutter , an open source plugin is now availed for early access by adobe with the ability to generate dart code from adobe XD designs that can be integrated into Flutter apps . Though still in early stage Designers and developers will need to find a more streamlined workflow to go from design to finished product faster across multiple platforms.

Adobe XD is available on windows and macOS only with a free starter plan to get you started .

Watch the Top Announcement in flutter interact at :

Need For the Resource :

Simplify designer-to-developer workflow

Adobe XD to Flutter is an attempt to simplify the designer to developer workflow by removing Guess work and Errors in User Design process.

Ability to generate working Dart code for the design

  • Plugin is able to generate dart code for design elements in Adobe XD that can be directly integrated into your existing application codebase for individual elements or you can export the code for entire artboard from adobe xd using the plugin.

Ability to Make UI Decision Changes

  • The ability to export UI designs to Flutter code further reduces the latency between creative ideas and product development,as an artboard adobe XD prototype can be easily converted to a working dart code within minutes.

Exporting Flutter Code Using Adobe XD :

Flutter Code can be easily exported using Adobe xd which provides you the ability to either export an Individual component or Entire widgets .

Add the following package dependency In Your Flutter Code:

:: Add in the dependency at pubspec.yaml manifest file .The package helps in reducing boiler plate in the generated XD code by creating helper functions .

adobe_xd | Flutter Package
Generate code for building apps with Flutter based on your designs in Adobe XD with the “XD to Flutter” plugin. This…pub.dev

Install Flutter Plugin In Adobe XD :

Install Flutter exporter plugin :

Plugins > Discover Plugins and in the search section search  XD to flutter

After Plugin Installation you will be able to access the UI panel from wherein exporting will be done by :

Plugins < XD to Flutter < UI Panel

The plugin provides you the ability to either export an Single widget or you can always export the entire adobe XD artboard.

Exporting a Widget

Select the widget that you need to export from the UI Panel by copying it .This copies the dart code to the clipboard which can then be easily exported integrated into your existing flutter project without changing any other files .

Exported Code Example

Exporting Entire Artboard :

Adobe xd plugin also avail the facility to export the entire artboard consisting the entire projects :

Add the flutter package in the project code from pub.dev .

In the pubspec.yaml add the adobe_xd packages in dependencies section.

Select Plugins < XD to Flutter < Export all widgets from the UI panel .

You can always change the default location of images and dart file from assets/images/ and lib directory of your project respectively

Note : Add the assets/images/ directory in your flutter project and at pubspec.yaml before exporting the code

Enable Hot Reload On Save Watcher

If after exporting the Flutter code you decided to change the adobe xd prototype for design betterment you just need to export them again (Ctrl+Shift+F on Windows) for automatic updation of flutter code .

To avoid re-exporting the widgets everytime you make a change you need to enable the Dart Hot Reload on Save Watcher setting in your IDE that will automatically reload the widgets . See more about Flutter’s hot reload capabilities.

Herewith Is some screenshots of the exported Flutter Code Using Plugin :

XD to Flutter is available now in the Adobe XD Plugin Manager, which includes dozens of plugins and integrations for XD, and is available on Github.

thize/xd-to-flutter
⚠️ If you encounter an issue or have any feedback which you think could improve Plugin, please open an issue here The…github.com

Closing Thoughts

Adobe XD Plugin provide us the facility to quickly make User Interfaces in flutter code from XD which can be termed as a new ways to make Flutter Apps.

Though being still in it’s early access preview there are some limitations as of now (unavailability of responsive layout, sync Issues ) in the plugin which can be seen in the release notes that may likely be shortly improved and will be automatically updated once the new plugin features become available

For more information, visit Adobe’s page for the XD to Flutter plugin

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

How Flutter Makes It Easier For Startups To Develop and Launch Apps

Shaiq Khan
-
0
How Flutter Makes It Easier For Startups To Develop and Launch Apps

Running a Start-up and managing an established organization are two very different things. An established company is always looking forward to increasing the business profit every year whereas start-ups still struggle to make one. On the other hand, already established businesses have invested a serious amount of time understanding their business requirements whereas startups might still be figuring out their market position.

This discussion can go on and on for hours but the entire point is that it’s very clear that the requirements of a startup are completely different from a well-established business.

The same applies to the development of Products. For an entrepreneur, to make their startup a revenue-making platform, they must have a Product ready for them to market. And the challenges don’t stop here. Running a startup comes with a lot of limitations, be it time, money, or resources. All these limitations make the startup owners build their product in a way that it has the quickest time-to-market and without compromising on its stability and quality. This further means that they’re working on a tight deadline and limited resources.

Just like any other type of product, a product for a mobility-based business is a highly functional cross-platform mobile application that is immune to scenarios like these. For building an application like that, you need a robust, time-efficient, cross-platform development tool. That is where Flutter fits perfectly in the picture.

Flutter is the most suitable tool for any startup out there. Flutter makes it easier for a startup to develop and launch an app. If you are still unsure of it, let me make it easier for you by dissecting some of its benefits and features.

In this small article, we will focus on how Flutter is the most startup-friendly and why you should choose it for developing your project.

Let us first have a quick understanding of what Flutter exactly is.

What is Flutter?

Flutter is an open-source software development kit that allows you to make mobile apps for multiple platforms at once. We can make mobile apps for Android, iOS, for computers like Linux, Mac, Windows, and even hybrid web apps.

Flutter was launched in 2018 and uses Dart programming language.

Reasons Why Startups Should Prefer Flutter

If you have an eye for details and perfection, you would have already comprehended Flutter’s advantages to your startup. But these are not the only reasons why Flutter is a crowd favorite. Here are some more reasons to chose Flutter over anything else.

Native Like Experience for your Cross-Platform Application

It has been the dream or let’s say a secret wish for a developer to recreate the native app experience in the cross-platform applications. Doesn’t matter how hard we tried, used the most advanced tools, it just simply could not offer the native-like experience ever.

But, that’s where Flutter jumps right in. With its native UI elements, Flutter served the entire developer community with something that they’ve been craving for years now. That’s where Flutter surprisingly made a difference with their innovation. It offered a native experience for two apps for two major platforms by writing the code just once.

: A Robust UI

The User Interface that Flutter offers is the best that is currently available. All thanks to Material Design, Flutter not only offers seamless and smooth UI but also a design that takes minimal to zero learning curve to get used to the app. Flutter has a huge range of customized widgets for both iOS and Android platforms that suits all user requirements.

: Improves Developer Productivity

The productivity of a developer is what a startup requires the most. The developer’s productivity directly affects the time efficiency. Flutter paves the way for optimized productivity among developers. All thanks to it’s Hot Reload Feature.

In simple words, the Hot Reload allows the developer to see the changes to the code instantly in real-time. Instead of recompiling the code to see the reflection of the changes, Flutter offers instantaneous visibility. It ends up saving a lot of development time.

: Lowest Development Cost

For any startup, profit comes later in the journey but managing the investment is always a concern. And when developing the product for the business, any entrepreneur would want to save as much as they can to develop the product without compromising on the quality and diversity of the product.

Flutter reduces the development cost at many steps in the process. Considering the above point, from writing one code for two different applications to reduced time in quality assurance to have tested only one app, there is a lot of time saved. And the time saved is the cost saved on all the resources.

: Faster MVP Development

The Minimum Viable Products helps to build a simpler and functional version of the entire concept. It is basically a bleak version of the intended product, developed to identify the business and economic viability. In the creation of a Startup MVP, the least amount of resources – capital and labor are to be placed.

MVP implementation needs to happen at a rapid pace in the startup world. At the same time, the MVP has to be made presentable. Keeping all these standards in mind, Flutter offers many advantages to create a perfect MVP for the business.

: Non-Stop Improvements

Flutter provides a highly versatile framework for your software needs. It has a bunch of customized widgets and UI that resembles the Native platforms. You can make a simple version of the app and can make changes into the app throughout the process that matched your design needs.

: Super Active Community

There is one thing that will never be hard to find when building an app in Flutter, that is Support. The Flutter community is super-active and is always involved with contributors from inside and outside of Google. From meetups to find the next event near you to Q&A participation on Stack Overflow, Slack, Twitter, and many other online media.

Closing Thoughts

The above reasons should be enough for an app-based tech startup to decide why Flutter is suitable for their needs. What’s more, Flutter is being used by some of the technology giants like Google, Alibaba, Tencent, and many more. So you need not worry about the reliability and security issues.

But if all of this sounds too technical and difficult, you can always prefer a Flutter app development company like us. We are the pioneers of the Flutter app development community. Standing proud at 21 Rank in the world awarded by GitHub.

Flutter — Paving Paths For A Way To The Future

Flutter has become a really powerful framework and can’t be ignored anymore. Even if you are a professional native Android or iOS developer, you should definitely try out Flutter to understand it’s true power. Seeing all this one thing is assured that Flutter has great potential in the coming time that will be further enriched and the difference it can bring in the table by giving a boost to your workflow and business growth as a lot of time can be saved that will contribute to developing and perfecting your app. With Flutter, the possibilities are practically endless, so even super extensive apps can be created with ease.

At FlutterDevs, We have been working on the Flutter since its Alpha version which has definitely given us an edge over the others as we’ve been fondling with flutter from the very beginning. We have adopted a design first attitude which has always led to delivering the highest quality mobile applications. FlutterDevs believes in giving back to the tech community that’s why we have been adding:

  • 90+ Open Source Contribution on GitHub
  • 100 + Technical Blogs on Medium
  • Brainstorming every day with a strong 16k+ LinkedIn Followers
  • Regular meetups around the cities to learn and grow as a community.
  • FlutterDevs Startup Incubator Programme is a platform being Initiated by FlutterDevs to avail a platform for newly emerging startups keeping in mind the factors needed for the proper functioning of a young emerging Business availing all the facilities under a single roof.

Get more Insights about the program:-

FlutterDevs at a Glance!

To strengthen you across various dimensions. Here is a showcase describing our flutter journey so far:

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

FlutterDevs

How Much Does it Cost to Make a Flutter App for Your Business ?

Shaiq Khan
-
0
How Much Does it Cost to Make a Flutter App for Your Business ?

Mobile apps have a prominent position in Today’s Time and age with the ability and power to transform our lives by giving us the much needed flexibility and comfort in our daily lives . With the time their need and demand have Increased at an whopping rate .Google has extended the capability of Flutter beyond mobile by releasing the new flutter 1.17 version & Dart 2.8 simultaneously . Whether you want to shop, Order food or groceries or travel anywhere in the world from one place to another place – Mobile apps have got us all covered Up.

Mobile app developers are building new apps every day, but what if there was a much easier way to do so?

If you are looking for a Cross-Platform app for your business that performs the benefits of Native, go with Flutter. Whether it is a small scale enterprise, mid-level organisations, or a startup, Flutter brings benefits to every business. Flutter can straightaway drop the mobile app development and maintenance expenses up to 60%. Let’s find out how:

Before we jump into talking about the cost of making the app, let’s quickly understand in brief what Flutter is :

What is Flutter?

Flutter is a complete SDK Open-source cross-platform mobile application development framework officially launched in an event by Google in 2018. Flutter is capable of creating apps for two of the largest mobile platforms- Android and iOS from a single codebase.

Flutter has taken the app developer community by storm. There is a wide range of advantages of this framework. Let’s take a look at some of them.

  1. Open Source
  2. Based on a Dart programming language
  3. Customised Widgets
  4. React Native Programming Architecture

Why Chose Flutter Over Others?

If you are looking forward to hiring an app developer, make sure they intend to use Flutter, So that it will make both yours and the developer’s lives easier. The cost of then developing the app will prove to be quite less, as the time to develop will reduce with the use of Flutter. What makes Flutter cost-effective?

  • Faster App Development
  • Reduced Testing Efforts
  • Access to Native Features
  • Excellent User Interface
  • Good for MVP Development

What Does It Cost Develop a Flutter App?

Developing an app can completely vary depending upon a lot of factors, it may cost less sometimes and sometimes more. Similarly, Flutter app development cost also varies depending on a few factors, Those are:

The App Development Complexity

Mobile applications are basically divided into categories starting from low-medium-high complexity. The more complexity, the more time to develop the app hence the cost will increase.

The separation is done on the factors:

  • Deployment Architecture Model
  • Admin Panel Development
  • In-built device’s features
  • Third-Party Integrations.

Categorization of the App

Due to the dynamic market change, there is a rapid shift in mobile app development. Just like complexity, apps with different features and functionalities are quite common. The number of features shift when you move from one app to the other.

Some apps have ‘x’ functionalities while the other may have ‘y’ features. This feature categorization estimates the cost of developing the app.

For Example, a currency converter app costs a lot less than a messaging app.

Application Design

There is a very common saying that ‘The first impression is the last impression’, I think it holds the same ground while developing an app for the user. The more easy and interactive app design will be, the more will be the number of users not being able to resist to use the app frequently. Beautiful designs do not come free of cost.

When it comes to Application design, the cost deciding features may also include:

  • Animations
  • Graphics
  • Design Complexity
  • Interactivity

Backend

Backend is just the backbone of your app. Only the frontend is visible to the user, but everything supporting the user action in the app is elusive. Backend controls the server, application security, app data, and data back-ups.

For estimating the cost, considering Backend holds a strong value

Location of Development Company/Agency

it is quite obvious that the cost of development of any mobile application will be more in the US than in some other countries. This is the reason many business owners chose to outsource their overall development process.

For Flutter as well, the development cost will be different for different regions across the Globe.

Maintainance

No matter how great results your app is showing, not updating it from time to time will make it lag behind in the world of apps and the app will lose traction.

The app maintenance necessity makes it an important element for Flutter development services. This may further include app updates, design changes, bug fixes, etc.

Closing Thoughts…

Flutter today is the most loved and widely used product of Google. It came in as a boon to business owners and developers across the globe. Over the years, The abilities of Flutter has managed to change the landscape of the mobile app development process. Various factors like back-end and front-end along with development services, directly affect the development process and cost of the application.

As we discussed above, Flutter is a cost-effective platform that slashes the app cost more than half and brings down the maintenance expenses by 20%

Hence, it stands as one of the best innovations by Google to the realm of App Development.

At FlutterDevs, We have been working on the Flutter since its Alpha version which has definitely given us an edge over the others as we’ve been fondling with flutter from the very beginning. We have adopted a design first attitude which has always led to delivering the highest quality mobile applications. FlutterDevs believes in giving back to the tech community that’s why we have been adding:

  • 90+ Open Source Contribution on GitHub
  • 100 + Technical Blogs on Medium
  • Brainstorming every day with a strong 16k+ LinkedIn Followers
  • Regular meetups around the cities to learn and grow as a community.
  • FlutterDevs Startup Incubator Programme is a platform being Initiated by FlutterDevs to avail a platform for newly emerging startups keeping in mind the factors needed for the proper functioning of a young emerging Business availing all the facilities under a single roof.

Get more Insights about the program:-

FlutterDevs at a Glance!

To strengthen you across various dimensions. Here is a showcase describing our flutter journey so far:

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

FlutterDevs

RealTime Firebase Database

Shaiq Khan
-
0
RealTime Firebase Database

Introduction

Do you want to use the web to store the user’s data or to provide the common data for all the users? This post will help you out in storing user’s data on a web database, sending Http request(Store +Fetch), showing Loading Progress. This database provides us Realtime information, any device connected to the database can receive the updated data within milliseconds. This database can be accessed directly without an application server.

Table of contents:

Preparing our backend

Sending POST request

Sending GET request

Preparing UI

Showing Loading Progress

Full Project

1. Preparing our backend

We will use firebase as our dummy backend because it gives us a server where we do not need to write any server-side code to communicate with the database.

If you search for firebase flutter you will find out the official documentation on how to add firebase to your FLUTTER APP and they do through a firebase plugin. So if you want to use all the services provided by the firebase in your app you can go to this link.

Add Firebase to your Flutter app
Follow this guide to add Firebase products to a Flutter app. Firebase supports frameworks like Flutter on a best-effort…firebase.google.com

I don’t want to go into much detailing about firebase because this is not a firebase post therefore, we will use the generic part of firebase which you can easily replace with other backends. So particularly for this post, the important part for us is to understand the database where we can communicate through our app directly.

Sign in — Google Accounts
Edit descriptionconsole.firebase.google.com

The above list is the link of the firebase console. Please set up your project.

There are two types of database available cloud firestore and realtime database. We will be using a realtime database because it is easy to implement.

Please set test mode while setting up a realtime database because this ensures that anyone can read and write on the database.

2. Sending POST request

Package required

  1. import the http package file into your file and update your pubspec.yaml file.
dependencies:
  http:

2. We have added as http to avoid naming clashes.

import 'package:http/http.dart' as http;

Generating request

To generate the post request we need the URL of our database which is available at the top of our database screen.

Copy the link to use it as the URL for your post request
http.post("https://fir-flutted60b0.firebaseio.com/userprofile.json",
        body: json.encode());
                             or
url =" https://fir-flutted60b0.firebaseio.com/userprofile.json";
http.post(url,body:json.encode());

Here we have also added “/userprofile.json” at the end of the URL. This is very important to add because the name “userprofile” is used as the field which is used to store the various attributes with a unique Id auto-generated by the firebase.

encode() statement is used to convert the data into JSON format.

Code Implementation:

sendData() {
    http.post("https://fir-flutter-d60b0.firebaseio.com/userprofile.json",
        body: json.encode({
          'firstName': firstNameController.text,
          'lastName': lastNameController.text,
          'email': emailController.text,
        }));
    setState(() {
      userProfile.add(Profile(
        firstName: firstNameController.text,
        lastName: lastNameController.text,
        email: emailController.text,
      ));
    });
  }

Also at the time of sending a post request, we have to add the Profile Widget into our userProfile list.

I am using setState state management technique to manage the state of the list of the user profile which changes every time the user adds a new user.

Data stored in the DATABASE using post request looks like this ………

3. Sending GET request

To fetch the data we will again need the same URL.

final response = await http.get("https://fir-flutter-d60b0.firebaseio.com/userprofile.json?");

Here we have taken an empty list named loadedProfile which is a list of widgets that will be updated every time the user adds a new profile.

final List<Profile> loadedProfile = [];

We will the JSON data from the database, therefore, we will need to add a decode() statement.

NOTE: To use encode() and decode() statements we need to import

import 'dart:convert';

Here extractedData is a variable that will store the profile. Each element of the response needs to be converted into a widget to provide a responsive UI for the user, therefore we have used the forEach() and add() statement to identify every new profile and add Profile widget into the loadedProfile list

final extractedData = json.decode(response.body) as Map<String, dynamic>;
    extractedData.forEach((profileId, profileData) {
      loadedProfile.add(
        Profile(
          email: profileData['email'],
          lastName: profileData['firstName'],
          firstName: profileData['lastName'],
        ),
      );
    });

Data fetched from the DATABASE using get request…….

4. Preparing UI

  1. NewUser Widget

In this widget, we have three TextField() and a FlatButton() which will take add from the user and generate a get request when the FlatButton() is pressed.

Now we need three different controllers for all three TextField().

final firstNameController = TextEditingController();
final lastNameController = TextEditingController();
final emailController = TextEditingController();

Widget

TextField(
                  controller: firstNameController,
                  decoration:InputDecoration(labelText:'FirstName'),
                ),
                TextField(
                  controller: lastNameController,
                  decoration: InputDecoration(labelText:'LastName'),
                ),
                TextField(
                  controller: emailController,
                  decoration: InputDecoration(labelText: 'email'),
                ),
               FlatButton(
                  child: Text("Send"),
                  color: Colors.indigo,
                  onPressed: sendData,
                ),

You can make a separate widget for this as well.

2. List of all the Users

This widget will show the list of all the users.

Profile() widget

https://gist.github.com/anmolseth06/2d2b17ae5d3822ac15f4424df969680d#file-profile-dart

I have used the ListTile() widget, you can change it if you don’t like it.

List Widget

Container(
                        child: Column(
                          children: userProfile
                              .map((ctx) => Profile(
                                    firstName: ctx.firstName,
                                    lastName: ctx.lastName,
                                    email: ctx.email,
                                  ))
                              .toList(),
                        ),
                      )

I have used the mapping method to create this widget because we don’t know the exact number of users available or uploaded by the app users.

userProfile is the list of all the users.

5. Showing Loading Progress

To show a CircularProgressIndicator() we need to initialize a new variable.

bool isloading = false;

The method sendData() needs to be converted into an async method and inside the method, we also need to initialize the await statement so that we can stop the execution of the further statement and by the time we can show the CircularProgressIndicator().

setting up the new sendData() method

Future<void> sendData() async {
    setState(() {
      isloading = true;
    });
    await http.post("https://fir-flutter-d60b0.firebaseio.com/userprofile.json",
        body: json.encode({
          'firstName': firstNameController.text,
          'lastName': lastNameController.text,
          'email': emailController.text,
        }));
    setState(() {
      isloading = false;
    });
    setState(() {
      userProfile.add(Profile(
        firstName: firstNameController.text,
        lastName: lastNameController.text,
        email: emailController.text,
      ));
    });
  }

setting up the widgets

isloading?CircularProgressIndicator(): FlatButton(
                  child: Text("Send"),
                  color: Colors.indigo,
                  onPressed: sendData,
                ),

We are changing the FlatButton() to a CircularProgressIndicator().

6. Github link

flutter-devs/FirebaseRealTimeDatabase
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.

If we got something wrong? Let me know in the comments. we 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!.

www.flutterdevs.com

Ad Mob in Flutter

Shaiq Khan
-
0
Ad Mob in Flutter

In flutter, there is always a scope of improvement as we all know it is growing rapidly in App’s world and many of us also want to develop an app which could also show external thing like an advertisement, an advertisement can consist many intentions like to promote something, to give general instructions, and also to seek some reviews, By the way, we had a glance over the uses of ads but the important part for a developer is the implementation of it.

So let’s understand how to implement it:

To implement Ad Mob in your app you first need to create an account into Google Ad Mob and after creating it you will find this screen

now you need to click on ADD APP if you want to create a new ad for your app then a window will appear on your screen asking “Have you published your app on Google Play or App Store” choose your option Yes or No and move forward and you will find a screen mentioning Enter Your App Information

Here you need to enter your app name and platform according to you, and then you move forward and you get an option to create an ad unit

when you move forward by clicking on CREATE AD UNIT you get a window of all types ads unit you can implement on your screen

after selecting any unit like Banner, Interstitial, etc you move forward to Configure ad unit setting, here you select a name for your ad unit and also you can customize your ad with all the available options

and when your app ad unit is created you are done with it, its time to link the app with firebase.

For this go to App setting, here you will see Link to Firebase option

after clicking on Link to Firebase, and we need to do it separately by adding package name and bundle id respectively for android and ios, then you need to select the existing project in which you want to implement

now you are done with ad mob part now let’s move to the Flutter part

you first need to dependency in your yaml file

admob_flutter: "^latest version"

Import is now in your dart code

import 'package:admob_flutter/admob_flutter.dart';

after that need to make some changes in android and ios part,

First, we will discuss the android part, here we need to make changes in manifest.xml file, we add these two lines of metadata in the manifest file and we would put our app id of add mob in the value field

<manifest>
  <application>
    <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-3940256099942544~3347511713"/>
  </application>
</manifest>

same in the ios we add this code into the info.plist and we would put our app id of add mob in the value field

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

for example

Android

iOS

Now we make a class where we put app ids and banner ids according to the platform.

https://gist.github.com/shivanchalpandey/11a57191419930baa9c84f89427737c5#file-admob_services-dart

now let’s understand to set up an ad banner on the screen, first, we are initializing ids in initState() and later using the AdmobBanner widget to show the banner in the list as you can see this in code below.

https://gist.github.com/shivanchalpandey/11a57191419930baa9c84f89427737c5#file-admob_services-dart

Now after implementing everything correctly you will have a banner between the list. So that’s it from my side.

you can find the source code from here::

flutter-devs/admob_demo
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, and Twitter for any flutter related queries.

Page Transitions in Flutter

Shaiq Khan
-
0
Page Transitions in Flutter

In this post, we shall discuss the page routes transitions in flutter. We will use the PageRouteBuilder method to animate our tradition between two different pages. You will definitely get an illusion of all types of transitions that are possible and you will be able to customize them as well and make your own Custom Transition.

Table of contents:

Transition in flutter

Implementation

PageRouteBuilder

pageBuilder

transitionDuration

transitionBuilder

Slide Transition

Fade Transition

Scale Transition

Size Transition

Rotation Transition

Construct a PageRouteBuilder

Designing UI

Github Link

Transition in flutter

In general, a transition is nothing but moving an object from one place to another. In flutter, it is also the same but in terms of widgets like container, button, and also pages since everything in flutter is itself a widget.

We will be using a certain transition technique to animate our transition between two pages or widgets.

Implementation

To set up a transition we will require a PageRouteBuilder since in return it provides us the required constructor.

PageRouteBuilder

PageRouteBuilder is a class that extends PageRoute, it creates a route that delegates to builder callbacks.

Properties

  • barrierColor
  • barrierDismissible
  • maintainState
  • opaque
  • pageBuilder
  • transitionDuration
  • transitionBuilder

We will be using pageBuilder, transitionDuration, transitionsBuilder.

pageBuilder

This property is used to build the content of the routes.

pageBuilder: (context, animation, anotherAnimation) {
  return ReturnPage();
},

transitionDuration

It takes the duration until the transition will last between pages.

transitionDuration: Duration(milliseconds: 2000),

transitionBuilder

This property is used to build the actual transitions.

transitionsBuilder:
    (context, animation, anotherAnimation, child) {
  animation = CurvedAnimation(
      curve: curveList[index], parent: animation);
  return FadeTransition(
    opacity:animation,
    child: child,
  );
}

Slide Transition

To implement SlideTranstion we will use the SlideTransition widgets. It creates a fractional translational transition.

positional property in SlideTranstion can’t be null.

SlideTranstion widget

SlideTransition(
    position: Tween(
            begin: Offset(1.0, 0.0),
            end: Offset(0.0, 0.0))
        .animate(animation),
    child: child,
);

Fade Transition

It creates a fade/opacity transition.

opacity property can’t be null.

FadeTransition(
  opacity:animation,
  child: child,
);

Scale Transition

This transition animates the route by controlling the scale of the child.

The scale property must not be null. The alignment argument defaults to Alignment.center.

ScaleTransition(
  scale: animation,
  child: child,
);

Size Transition

This transition creates a size transition.

The axis, sizeFactor, and axisAlignment arguments must not be null. The axis argument defaults to Axis.vertical. The axisAlignment defaults to 0.0, which centers the child along the main axis during the transition.

Align(
  child: SizeTransition(
    sizeFactor: animation,
    child: child,
    axisAlignment: 0.0,
  ),
);

Rotation Transition

It creates a rotation transition.

The turn argument must not be null.

RotationTransition(
  turns: animation,
  child: child,
);

Constructing a PageRouteBuilder

Designing the UI

main.dart

I have taken all the possible transitions in my project. I have made a different file for each transition. I have used pageNamed method to connect all the files. As you can see in the gist as well.

https://gist.github.com/anmolseth06/b8106796cb31bcef35b48d8c46919c0e#file-main-dart

list.dart

I have takes all the possible Curvers that are available in flutter, so that we can see and examine all the Transition.

https://gist.github.com/anmolseth06/3b846cf48177cda4cf77d48b8160b025#file-list-dart

sizeAnimation.dart

We are building the ListTile of all the 40 curves that are available for us.

On tapping on ListTile we will see the transition linked to it.

https://gist.github.com/anmolseth06/569254ed3d45d9d542a03a935ef67f5b#file-sizeanimation-dart

Similarly, I have made 5 different files for all the Transition as you can see them in my GitHub project.

Github Link

flutter-devs/page-route-transition-demo
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.

If we got something wrong? Let me know in the comments. we 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!.

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

Network State Handling like Kotlin Sealed classes | Flutter

Shaiq Khan
-
0
Network State Handling like Kotlin Sealed classes | Flutter

In the article, I’ll be showing you how you can manage the state of the network just like kotlin sealed classes.

if you want to know about the kotlin sealed classes check out

Is sealed class also supported in dart?

NO , sealed classes are not supported in dart.

How can we use the same in dart?

Yes, there is an alternative in dart .
You must have heard of provider package in flutter for state management, Remi has done great work, do you know he also has create another package which is freezed.

freezed | Dart Package
Welcome to Freezed, yet another code generator for unions/pattern-matching/copy. While there are many code-generators…pub.dev

Let’s see how can we achieve network state handling just like kotlin sealed classes

Step 1: Install the dependency

dependencies: 
  freezed: <latest-version>

and

dev_dependencies:
  build_runner: <latest-version>

now run pub get

Step 2: Create a network state class

Before creating the network state class we need to see what states do we need?

We will need Success, Error, Loading, Idle states.

https://gist.github.com/ashishrawat2911/de6237ed6d5eea29e1fbf6c541bcb441#file-result-dart

Create a freezed class and define the states, If you see we have created the Result class generic so it can we used for any data. We only want data to in Result.success() and reason for failure in Result.failure() .

Now freezed will generate file , for that you need to specify

part 'result.freezed.dart';

Now run

flutter packages pub run build_runner build

Your generated will look like this

https://gist.github.com/ashishrawat2911/d15863bfdfe109241b65706b3ffe76fd#file-result-freezed-dart

Now we will be using it with streams (Bloc)

Step 3: Create a bloc class

Create a stream controller with the data type you what encapsulated with Result class you have generated.

StreamController<Result<List<Prediction>>> streamController =      StreamController<Result<List<Prediction>>>();

Create the method which will do the API handling, initial you will need to add loading into the stream so the UI will begin to load

streamController.sink.add(Result.loading());

now hit the API,

try {
      
Prediction prediction = await appRepository.getPlacesPrediction(search); 
//Do something when you get the data
        
} catch (e) {      
// When you get an exception
}

If you get the result

streamController.sink.add(Result.success(data: prediction.predictionsList));

On error, you will add the

streamController.sink.add(Result.failure(reason: e.toString()));

You can do an error handling on you own to display your own error.

See the bloc class here

https://gist.github.com/ashishrawat2911/f5dfdecf685908a4dfad4eb54d8bb497#file-prediction_bloc-dart

Step 4: Update the UI

First, we need to create the bloc instance

PlacePredictionSearchBloc placePredictionSearchBloc = PlacePredictionSearchBloc();

Now use the StreamBuilder

StreamBuilder<Result<List<Prediction>>>(

  stream: placePredictionSearchBloc.streamController.stream,

initialData: Result.idle(),

  builder: (BuildContext context,
      AsyncSnapshot<Result<List<Prediction>>> snapshot) {

   return snapshot.data.when(idle: () {
      
    }, loading: () {
     
    }, success: (List<Prediction> value) {
     
    }, failure: (String reason) {
      
    });
  },
),

Now you can we can manage the UI according to the network state.
In the initialData parameter, I have provided the Result.Idle so in the starting whatever we pass in the idle :(){} will show into UI

Check the code here

https://gist.github.com/ashishrawat2911/4892e72602204c34fade8b874ca15ede#file-result_stream_builder-dart

Thanks for reading this article

If I got something wrong, Let me know in the comments. 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.

Connect with me https://www.ashishrawat.dev

And read more articles from FlutterDevs.com

FlutterDevs has been working on Flutter from quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.

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

1...373839...73Page 38 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.