--- title: "Flutter Tutorial for Beginners: Step by Step Guide to Build Apps" description: "Step-by-step Flutter tutorial for beginners: Set up Flutter & Android Studio, master Dart, widgets, layouts, and app navigation." author: "Karan Shah" category: "Engineering" published: "2019-11-22" reading_time: "17 min read" canonical: "https://www.solutelabs.com/blog/flutter-tutorial-for-beginners-step-by-step-guide" --- # Flutter Tutorial for Beginners: Step by Step Guide to Build Apps Since it’s much-awaited launch, Flutter has caught a lot of attention, and we’re excited about it too! I’m hoping that a massive chunk of non-game apps will transition to flutter, and in anticipation, we are therefore training our team on it as well. Since there are new, but few, resources scattered over the internet to learn flutter basics step by step — we’ve compiled our Flutter tutorial to get developers off their feet and start developing apps for Flutter. In this Flutter step by step guide for beginners, we will cover: - Flutter: What, How, and Why? - Setting up Flutter - Dart Basics - Flutter Basics - Widgets - Layouts - Interactive Widgets - Designing an app: Forms, Gestures, and Images - Lists - Navigation - Networking - JSON and Serialization - Dependency Management - State Management - Testing (Unit and Integration) ## 1. Flutter: What, How, and Why? What is Flutter, and how is it different? Being Flutter app developers, you need to just remember this — Flutter was built to work for any device with a screen and works with: - iOS and Android - Web and Desktop (Mac, Windows, and Ubuntu) — Even support PWA - Auto - Raspberry Pi (POC stage) Check out this video from Google; it’s a great place to get a grasp — comparing Native Development, Hybrid App Development, React Native Development, and finally, [Flutter App Development](https://www.solutelabs.com/flutter-app-development-services). ▶ Video: https://www.youtube.com/watch?v=l-YO9CmaSUM Here is the latest news on the launch of the new version of Flutter and Dart programming language-”Flutter has since made a landmark upgrade — learn [[what changed in Flutter 2.0](https://www.solutelabs.com/blog/flutter-2-0-everything-you-need-to-know-about)], the release that introduced stable null safety and multi-platform support ## 2. Setting up Flutter ![Pros And Cons of Flutter](https://cdn.sanity.io/images/0mnqm898/production/ede0cfb77b094d24e77a3a2d4883a1d9c6d8295c-1375x1323.png?w=1200) Flutter is relatively straightforward to set up and depending on what OS you’re using; you can check out the steps in this official Flutter tutorial: [https://docs.flutter.dev/get-started/install](https://docs.flutter.dev/install) But in case, you do run into something, check out here: [https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#flutter-installation](https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#flutter-installation) The reason we ask that you setup Flutter before Dart is because when you install Flutter, you install Dart too, and while you can separately install Dart, it would be an unnecessary step. Flutter will decide which Dart version will be used, so installing different Dart version will be ambiguous as well. Once you’ve downloaded and unzipped Flutter, you should see something like this on running the Flutter command at the console: ![Welcome to flutter - Setting up Flutter](https://cdn.sanity.io/images/0mnqm898/production/a918c717207cbd70ac4be0d6cb48e25293059534-700x293.png?w=1200) If you’re new to mobile development in general, you will need to download [Xcode](https://developer.apple.com/xcode/) and [Android Studio](https://developer.android.com/studio/index.html) (and toolchain), as well. Once you’ve setup Flutter, scaffolding a new project is just one command. ## 3. Dart Basics Flutter uses [Dart language](https://dart.dev/) to build Apps. To understand why Flutter uses dart, check out my previous blog and down to the section — How Flutter was born [Flutter for your next ‘product’ idea — Everything you need to know](https://www.solutelabs.com/blog/flutter-for-your-next-product-idea-everything-you-need-to-know) — As a startup founder, you might have/not have come across ‘Flutter.’ This post explains why it’s essential to have a 360-degree perspective when it comes to choosing the right technology for your product. Flutter and Chrome use the same rendering engine — SKIA. Instead of interacting with native APIs, it controls every pixel on the screen, which gives it the much necessary freedom from the legacy baggage as well as the performance it has. Do give the [official doc](https://docs.flutter.dev/resources/faq#why-did-flutter-choose-to-use-dart) a read, but I found this one to be good at explaining dart [Why Flutter Uses Dart](https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf) — Many linguists believe that the natural language a person speaks affects how they think. Does the same concept apply to computer languages? P.S. You can follow up with Dart updates on their [medium account](https://blog.dart.dev/) Now, you know why [Google](https://en.wikipedia.org/wiki/Google) choose Dart — so let’s get your hands dirty! ### Learn Dart Check out the official docs of Dart language, [a tour](https://dart.dev/language), and their [language samples](https://dart.dev/language). Once you have an overview from this Dart tutorial, head over to [https://www.jpryan.me/dartbyexample/](https://www.jpryan.me/dartbyexample/) and do all the examples religiously. ### Practice, Practice, Practice! Edit your code on [DartPad](https://dartpad.dev/) for starters and get a better grip. I’m sure you’ll be up and running in no time! ![My First Hello, World! in Dart 🎉](https://cdn.sanity.io/images/0mnqm898/production/30e3ff3272bffa04e71c4d7fe082de23b3057592-700x136.png?w=1200) After, you’re done with dartbyexample, head over to exercism, and complete their dart track. It’s trendy, so in case it’s full, you can do the practice track too. [Dart | Exercism](https://exercism.org/tracks/dart) — Dart is a general purpose programming language which has seen a rise in popularity for its usages in mobile and web application development. ## 4. Flutter Basics Now that you’re familiar with Dart, it’s finally time to move on to Flutter basics ![Penguin Gif ](https://cdn.sanity.io/images/0mnqm898/production/55e5fb1ceefd682de203c9c54ea0d0ff943ea48b-495x480.gif?w=1200) Let’s start this Flutter tutorial with the technical overview here: [Technical overview](https://docs.flutter.dev/resources/architectural-overview) — Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web (beta), and desktop (technical preview) from a single codebase. And scaffold a new Flutter app with: > flutter create *app_name* And you should see something like this: ![Android studio for flutter application - Flutter tutorial for beginners](https://cdn.sanity.io/images/0mnqm898/production/6f7885a25c9ea6a9e07d2d2361924841a75216c2-700x272.png?w=1200) Open the project on the Android Studio, download the emulator, and an Android version if not done already and run the project — and et voila! ![Flutter demo homepage - Step by step flutter tutorial](https://cdn.sanity.io/images/0mnqm898/production/1d7d713995ce1134da6437f1eaedc2560b97c867-700x863.png?w=1200) Understand as to how should you structure your project directory and understand which files are meant for which purpose [Flutter Project Structure](https://dev.to/jay_tillu/flutter-project-structure-1lhe) — As always, I’ll be very straight forward and try to keep the article short, simple and very precise. So that in no time... Now that you’ve setup flutter, another step in this Flutter Tutorial for beginners is to do what all developers do! Use other’s code 😆 — what I meant is to set up the package file: pubspec, written in YAML [The pubspec file](https://dart.dev/tools/pub/pubspec) — Every pub package needs some metadata so it can specify its dependencies. Pub packages that are shared with others also need to provide some other information so users can discover them. ## 5. Widgets > Remember — Everything’s a widget in Flutter If you’ve not read the technical overview as we asked you before, go back and read it :) Also, we've written a detailed guide on [Flutter Widgets](https://www.solutelabs.com/blog/flutter-widgets-a-brief-guide) from which you will get a fair idea of what widgets are and how you can use it. Widgets come in two flavors: ***stateless*** and ***stateful*** **Stateless Widgets** are those whose state doesn’t change like a button or an image. As the name states, it doesn’t change its state when an action is performed on the screen. Check out the short video series, and it’s [documentation](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) by Google to explore in-depth (I’m attaching the first video in the series). When a widget needs to hold some state like a current page in [PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html), the currently selected tab in a [BottomNavigationBar](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html), Stateful widgets are the right choice to make. **StatefulWidgets** can hold the current state of a Widget. Instead of a widget build method, a Stateful widget has a [State](https://api.flutter.dev/flutter/widgets/State-class.html) build method which calls each time we explicitly call ***setState***. And Similarly, check out the documentation (it has the video inside) for the stateful widgets here: [StatefulWidget class](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html) — A widget that has mutable state. State is information that (1) can be read synchronously when the widget is built and... Flutter 1.9 was released at [GDD China](https://developers.googleblog.com/en/flutter-news-from-gdd-china-uniting-flutter-on-web-and-mobile-and-introducing-flutter-19/) with a host of new features and a mark that the community is multiplying (and that you can’t ignore China now) ## 6. Layouts in Flutter As we discussed earlier in this Flutter guide, everything is a widget in Flutter — including layout models. Check out the documentation here: [Layouts in Flutter](https://docs.flutter.dev/ui/layout) — What's the point? Widgets are classes used to build UIs. Widgets are used for both layout and UI elements. Compose... Widgets such as the rows, columns, and grid are layout widgets (which we don’t see on screen) that helps other visible widgets to arrange, constraints, and align. > ⏰ Time for Codelab: [Write your First Flutter App : Part-1](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0) ### And, Some more Widgets! Flutter comes with a suite of powerful basic Widgets such as [Text](https://api.flutter.dev/flutter/widgets/Text-class.html), [Column](https://api.flutter.dev/flutter/widgets/Column-class.html), [Row](https://api.flutter.dev/flutter/widgets/Row-class.html), [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html), and [Container](https://api.flutter.dev/flutter/widgets/Container-class.html). The basic widgets will help you creating custom views as you want. If your app follows [material design guidelines](https://m2.material.io/design/guidelines-overview), Flutter has a lot to cover by default. Flutter provides several widgets that support Material Design. It includes widgets such as [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html), [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html), [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html), etc. ![ Flutter widgets support material design - Learn flutter step by step](https://cdn.sanity.io/images/0mnqm898/production/0569b37b140515542610eaf2c7cf780c538ef490-700x515.png?w=1200) *Source: [Material Navigation Drawer](https://m3.material.io/components/navigation-drawer/overview)* Flutter also includes the iOS-centric [Cupertino component](https://docs.flutter.dev/ui/widgets/cupertino) package. It covers widgets such as [CupertinoApp](https://api.flutter.dev/flutter/cupertino/CupertinoApp-class.html), [CupertinoNavigationBar](https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html), etc. ![Flutter widget - Cupertino NavigationBar](https://cdn.sanity.io/images/0mnqm898/production/b41f84fb12113d98ec54b094b08934e0c3bd522b-316x342.png?w=1200) *Source: [Cupertino NavigationBar ](https://developer.apple.com/design/human-interface-guidelines/navigation-bars)* ## 7. Interactive Widgets So far in this Flutter step by step tutorial, we have seen Widgets that display information on-screen or arrange other widgets. For the real app, it is equally essential to make the app interactive and get user’s input in various forms like Gesture, taps, etc. To achieve this, Flutter has numbers of StatefullWidgets such as [Checkbox](https://api.flutter.dev/flutter/material/Checkbox-class.html), [Radio](https://api.flutter.dev/flutter/material/Radio-class.html), [Slider](https://api.flutter.dev/flutter/material/Slider-class.html), [InkWell](https://api.flutter.dev/flutter/material/InkWell-class.html), [Form](https://api.flutter.dev/flutter/widgets/Form-class.html), and [TextField](https://api.flutter.dev/flutter/material/TextField-class.html), etc. These widgets are capable enough to maintain their state (e.g., Text we are entering in TextField, whether a CheckList is checked or not.) Go and check out the below example to add Favorites/Non-Favorites functionality to your app. [Adding interactivity to your Flutter app](https://docs.flutter.dev/ui/interactivity) — What you’ll learn How to respond to taps. How to create a custom widget. The difference between... > ⏰ Time for Codelab: [Write your First Flutter App : Part-2](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0) > As you have reached here, you should be clear with **What is Widgets ?** and **Types of Widget** Now you must be curious about what are all widgets available in Flutter? So here is a Widget Catalog, Check all the Widgets that make Flutter development relaxed and Fun 😍 [Widget catalog](https://docs.flutter.dev/ui/widgets) — Create beautiful apps faster with Flutter’s collection of visual, structural, platform, and interactive widgets. In addition to... ### Flutter Cookbook And here we go, it’s time to learn Flutter for real apps with the help of Flutter Cookbook. I mean Apps that have Multiple screens, Images, Network dependency, and all. So, let’s begin. ## 8. Designing an App Check the below app illustration. ![Flutter designing an app](https://cdn.sanity.io/images/0mnqm898/production/2a3b1a5e87a5abc7b79e1ae73000d0f8c70195b1-270x480.gif?w=1200) This Simple looking app has these features 👇 1. [Navigation Drawer](https://docs.flutter.dev/cookbook/design/drawer) 2. [SnackBar](https://docs.flutter.dev/cookbook/design/snackbars) 3. [Custom Fonts (A Text have its own Style 😉)](https://docs.flutter.dev/cookbook/design/package-fonts) 4. A [Text](https://docs.flutter.dev/ui/widgets/text)-based on [Orientation](https://docs.flutter.dev/cookbook/design/orientation) (Bigger fonts in Landscape) 5. And, [Multiple Tabs](https://docs.flutter.dev/cookbook/design/tabs) > **Note here:** **OrientationBuilder** is independent of the device’s orientation. Instead, It calculates the current Orientation by comparing the width and height available to the parent widget. To determine the device’s orientation you can refer **MediaQuery.of(context).orientation** ### 8.1 Forms Flutter has a **Form** widget that helps to build a form that efficiently manages the essential requirement of a Form, e.g., State of a Form, Validation, etc. Check out the complete guild in the below documentation. [Cookbook](https://docs.flutter.dev/cookbook#forms) — This cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps. Each recipe is... ### 8.2 Gestures To get the user inputs and some-time to make the app super interactive, we maximize the use of Gestures. Flutter has pre-built widgets to cover this. 1. [Adding Material Ripple Effect](https://docs.flutter.dev/cookbook/gestures/ripples) 2. [Handle Taps](https://docs.flutter.dev/cookbook/gestures/handling-taps) 3. [Swipe to Dismiss](https://docs.flutter.dev/cookbook/gestures/dismissible) ### 8.3 Images To make apps beautiful and engaging, we use Images. Flutter provides an **Image** widget to display an image in the Flutter app from various sources. 1. Display Images from Network [Display images from the internet](https://docs.flutter.dev/cookbook/images/network-image) — Displaying images is fundamental for most mobile apps. Flutter provides the Image widget to display different types of images. 2. Display Image with Placeholder & with Fade-in Animation [Fade in images with a placeholder](https://docs.flutter.dev/cookbook/images/fading-in-images) — When displaying images using the default Image widget, you might notice they simply pop onto the screen as they’re loaded. This might feel... 3. Sometimes it’s handy to Load image from network and cache it in local storage to make it quickly available next time. [Work with cached images](https://docs.flutter.dev/cookbook/images/network-image) — In some cases, it’s handy to cache images as they’re downloaded from the web, so they can be used offline. For this purpose, use... ## 9. Showing more data using List To accommodate more data, we use List to show them. The list can be horizontally or linearly. Flutter has a [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) and [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html). These are basic widgets with different contractors to identify how they can be used. 1. Create a grid list [Create a grid list](https://docs.flutter.dev/cookbook/lists/grid-lists) — In some cases, you might want to display your items as a grid rather thana normal list of items that come one after the… 2. Create list horizontally [Create a horizontal list ](https://docs.flutter.dev/cookbook/lists/horizontal-list) — You might want to create a list that scrolls horizontally rather than vertically… 3. The list can have different types of Item. E.g., a header & items to it. Check here how you can cover such cases in ListView. [Create lists with different types of items ](https://docs.flutter.dev/cookbook/lists/mixed-list) — You might need to create lists that display different types of content. For example, you might be working on a list that… 4. Floating app bar and Nested scrolling using SliverList [Place a floating app bar above a list ](https://docs.flutter.dev/cookbook/lists/floating-app-bar) — To make it easier for users to view a list of items, you might want to hide the app bar as the user scrolls down the… > Don’t forget to check out this awesome article by [Emily Fortuna](https://medium.com/@emily.fortuna) to understand Slivers in depth 5. Sometimes we have predefined arbitrary items to be placed in a List. e.g., Setting categories. In ListView, you can pass custom items (in the form of Widgets) to its children. [Use lists ](https://docs.flutter.dev/cookbook/lists/basic-list) — Displaying lists of data is a fundamental pattern for mobile apps. Flutter includes… 6. Sometimes a List has more items then the viewport of a screen. In such cases, it makes no sense to build all the items at once. Flutter has ***ListView.Builder*** that uses the Lazy rendering approach to create list items efficiently. [Work with long lists ](https://docs.flutter.dev/cookbook/lists/long-lists) — The standard [`ListView`]({{site.api}}/flutter/widgets/ListView-class.html)constructor works well for small lists. To… If you have more items in a list and looking to paginate them. Here is a good article I found 👇 [How to paginate your data in Flutter](https://www.solutelabs.com/blog/how-to-paginate-your-data-in-flutter) — A simple workaround for infinite scroll in ListView in Flutter ## 10. Navigating between screens aka routes Most apps contain multiple screens to display data in a well-organized manner. In Flutter, we can do navigation-related operations using [Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html). Check below diagram to understand how Flutter manages multiple routes, and later, we will discuss how to navigate up and forth between them. ![Flutter route stack](https://cdn.sanity.io/images/0mnqm898/production/1e73e7b5cd862c05171b4777f7b16af91a990b18-292x242.png?w=1200) 1. Navigate to a new screen and back [Navigate to a new screen and back ](https://docs.flutter.dev/cookbook/navigation/navigation-basics) — Most apps contain several screens for displaying different types of information. For example, an app might have a… 2. Pass data to new screens and retrieve results. [Send data to a new screen ](https://docs.flutter.dev/cookbook/navigation/passing-data) — Often, you not only want to navigate to a new screen,but also pass data to the screen as well.For example, you might… [Return data from a screen ](https://docs.flutter.dev/cookbook/navigation/returning-data) — In some cases, you might want to return data from a new screen.For example, say you push a new screen that presents two… > So far, what we have seen is Flutter suitable for small projects. But when the project grows, we want to manage all routes at a single place. Also, we might need to address below questions ***1***. ***How many routes we have?*** ***2. How to initialize each route?*** ***3. What data is required by each route?*** ***etc..*** 3. To manage all this efficiently, Flutter has named routes. [Navigate with named routes ](https://docs.flutter.dev/cookbook/navigation/named-routes) — In the [Navigate to a new screen andback](/docs/cookbook/navigation/navigation-basics) recipe,you learned how to… 4. Pass arguments in named routes. [Pass arguments to a named route ](https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments) — The [`Navigator`]({{site.api}}/flutter/widgets/Navigator-class.html)provides the ability to navigate to a named route… And, What about this animation while navigating to a new screen? ![Hero animation](https://cdn.sanity.io/images/0mnqm898/production/72dfa7bad6d3f63bcc8d7c297b7e49455978dc01-320x533.gif?w=1200) *Source: [Hero animation](https://docs.flutter.dev/cookbook/navigation/hero-animations)* ## 11. Networking Most apps we come across nowadays, are generally connected with third party server and makes requests to the server to fetch or post data. In Flutter, we can use HTTP as a third-party pub to do such stuff. [http | Dart Package ](https://pub.dev/packages/http) — A composable, Future-based library for making HTTP requests. This package contains a set of high-level functions and… 1. Fetch data from the network [Fetch data from the internet ](https://docs.flutter.dev/cookbook/networking/fetch-data) — Fetching data from the internet is necessary for most apps.Luckily, Dart and Flutter provide tools, such as the`http`… 2. Make authenticated requests [Make authenticated requests ](https://docs.flutter.dev/cookbook/networking/authenticated-requests) — To fetch data from many web services, you need to provide authorization. There are many ways to do this, but perhaps the… 3. Work with web sockets [Work with WebSockets ](https://docs.flutter.dev/cookbook/networking/web-sockets) — In addition to normal HTTP requests, you can connect to servers using WebSockets. WebSockets allow for two-way… Flutter has few more pubs available, which do such stuff more efficiently. Don’t forget to take a look at the below pubs. [dio | Dart Package ](https://pub.dev/packages/dio) — Language: English | 中文简体 A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData… [chopper | Dart Package ](https://pub.dev/packages/chopper) — Chopper is an http client generator using source_gen and inspired by Retrofit. ## 12. Using JSON and Serialization In Flutter, we generally have two strategies for JSON serialization. Manual parsing and automated serialization using code generation. > Runtime [reflection](https://en.wikipedia.org/wiki/Reflection_(computer_programming)) is disabled in Flutter, resulting we cannot have libraries like [GSON](https://github.com/google/gson) , [Jackson](https://github.com/FasterXML/jackson-core) or [Moshi](https://github.com/square/moshi) Check out the full guide with both strategies here [JSON and serialization ](https://docs.flutter.dev/data-and-backend/serialization/json) — It is hard to think of a mobile app that doesn’t need to communicate with a web server or easily store structured data… For manual parsing, don’t forget to check out this online tool to auto-generate boilerplate for the model class. [Instantly parse JSON in any language | quicktype ](https://app.quicktype.io/) — Whether you’re using C#, Swift, TypeScript, Go, C++ or other languages, quicktype generates models and helper code for… ### Data Persistence Sometimes we need to persist data in local memory to quickly available whenever we need them. 1. If you have a relatively small amount of data to be stored in a key-value pair. Consider using [shared-preferences](https://pub.dev/packages/shared_preferences). Below is the detailed guide to achieving the same using Flutter. [Store key-value data on disk ](https://docs.flutter.dev/cookbook/persistence/key-value) — If you have a relatively small collection of key-valuesto save, you can use… 2. You can also read and write files on disk. [Read and write files ](https://docs.flutter.dev/cookbook/persistence/reading-writing-files) — In some cases, you need to read and write files to disk.For example, you may need to persist data across app… 3. If an app needs to persist a large amount of data and also it requires to query them. It is advised to use an [SQLite database](https://www.sqlite.org/index.html) Flutter app can use the SQLite database via [sqflite](https://pub.dev/packages/sqflite) pub. [Persist data with SQLite ](https://docs.flutter.dev/cookbook/persistence/sqlite) — If writing an app that needs to persist and query larger amounts of data on the local device, consider using a database… For easy to use, reactive persistence, check out below pub. Moor is a wrapper around sqflite. [moor_flutter | Flutter Package ](https://pub.dev/packages/moor_flutter) — Moor is an easy to use, reactive persistence library for Flutter apps. Define your database tables in pure Dart and… ## 13. Dependency Management We use so many pubs in the Flutter app. It’s a great way to work collectively and share code across apps without having to develop everything from scratch. You can find all the useful packages from here. [Dart packages ](https://pub.dev/) — Packages are sorted by the overall score. More information on ranking. A composable, cross-platform, Future-based API… With multiple pubs, you might faces issues like conflicts in the version resolving. You can find all the best practices here to be followed while using pubs. [Using packages ](https://flutter.dev/docs/development/packages-and-plugins/using-packages) — Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems. This allows… --- And, with all this, you now have completed Flutter cookbook. 👏 ## 14. An Art of State Management ### Introduction In a typical app, it is a common use-case that a change made at Point-A reflects some changes at Point-B. That is called State Management. It can also be understood by the below illustration. ![Flutter - An Art of State Management](https://cdn.sanity.io/images/0mnqm898/production/722ae7f8223e475e25a636f060201391801ab08f-1920x1080.png?w=1200) *Source: [Image Credit](https://docs.flutter.dev/data-and-backend/state-mgmt/options)* Flutter has multiple approaches that can efficiently manage the State of the app. Based on project size we can decide the appropriate techniques. We have written an article where you can get to know in detail [everything about Flutter State Management](https://www.solutelabs.com/blog/flutter-state-management-everything-you-need-to-know). Here we will discuss a few of the possible techniques for State management. 1. setState way [Adding interactivity to your Flutter app ](https://docs.flutter.dev/ui/interactivity) — What you’ll learn How to respond to taps. How to create a custom widget. The difference between stateless and stateful… [Basic State Management in Google Flutter ](https://medium.com/@agungsurya/basic-state-management-in-google-flutter-6ee73608f96d) — How I Met Google Flutter 2. Inherited Widget Check out the below video to understand, **What is Inherited Widgets?** ▶ Video: https://www.youtube.com/watch?v=Zbm3hjPjQMk Also, Check out the complete list of articles here [List of state management approaches ](https://docs.flutter.dev/data-and-backend/state-mgmt/options#inheritedwidget--inheritedmodel) — State management is a complex topic. If you feel that some of your questions haven’t been answered, or that the approach… > Remember “Theme.of(context);” and “Navigator.of(context);” you used earlier? That is using the same Inherited Widget concept to access data down in the widget tree. 3. The Provider Package The [provider](https://pub.dev/packages/provider) is a mixture of DI (dependency injection) and State management built with widgets for widgets. Official documentation of provider is too good to understand it in depth. [provider — Dart API docs ](https://pub.dev/documentation/provider/latest/) — A mixture between dependency injection (DI) and state management, built with widgets for widgets. It purposefully uses… 4. BLoC Pattern [BLoC](https://www.solutelabs.com/blog/flutter-bloc-tutorial) is a Simple, Lightweight, and highly testable a predictable state management library for Dart. [Bloc ](https://bloclibrary.dev/#/) — Bloc library documentation I also found this good video series explaining BLoC pattern (with [Accompanying article series](https://resocoder.com/2019/10/26/flutter-bloc-library-tutorial-1-0-0-stable-reactive-state-management/)) ▶ Video: https://www.youtube.com/watch?v=oxeYeMHVLII&list=PLB6lc7nQ1n4jCBkrirvVGr5b8rC95VAQ5 > There are also other popular State management techniques in the industry. Like [Redux](https://docs.flutter.dev/data-and-backend/state-mgmt/options#redux) and [Mobx](https://docs.flutter.dev/data-and-backend/state-mgmt/options#mobx). --- ## 15. Testing That’s another step in this Flutter Tutorial. When the app grows, it becomes hard to test every feature, and then it comes [regression](https://www.solutelabs.com/blog/what-is-regression-testing) too. In such cases, automation testing is the way to go. It helps ensure that the app performs as expected before we release it. And so we don’t fall in such situations. 😆 ![Computer testing gif](https://cdn.sanity.io/images/0mnqm898/production/a8249064dd199aabf55de16c11f2a50b81ad7663-480x366.gif?w=1200) Automation testing falls under three categories - A [*unit test*](https://docs.flutter.dev/testing#unit-tests) tests a single function, method, or class. - A [*widget test*](https://docs.flutter.dev/testing#widget-tests) (in other UI frameworks referred to as *component test*) tests a single widget. - An [*integration test*](https://docs.flutter.dev/testing#integration-tests) tests a complete app or a large part of an app. Check out the introduction to testing in Flutter here [Testing Flutter apps ](https://docs.flutter.dev/testing) — The more features your app has, the harder it is to test manually. Automated tests help ensure that your app performs… ### 15.1 Unit Testing The goal of Unit testing is to test a particular Unit of code with Stub/mock dependencies. Verify the code works as expected in different scenarios. A unit test is very fast and doesn’t require an actual device to execute. [An introduction to unit testing ](https://docs.flutter.dev/cookbook/testing/unit/introduction) — How can you ensure that your app continues to work as you add more features or change existing functionality? By writing… While doing Unit tests, any dependent classes should be injectable, so that we can inject a mock or fake implementation of dependency and verify if everything working as expected. Flutter has a [mockito](https://pub.dev/packages/mockito) framework that helps to create a mock or fake implementation. [mockito | Dart Package ](https://pub.dev/packages/mockito) — Mock library for Dart inspired by Mockito. import ‘package:mockito/mockito.dart’; // Real class class Cat { String… ### 15.2 Widget Testing Widget Testing (in Flutter) is a UI testing technique. The goal of widget testing is to test if particular Widget UI looks as expected, and it’s interactive. Widget testing doesn’t require a physical device. We could also test the properties of Widget, like Color, Size, Font Family, etc.. We can also perform user events like tap, gestures, entering text, etc [An introduction to widget testing ](https://docs.flutter.dev/cookbook/testing/widget/introduction) — In the introduction to the unit testing recipe, you learned how to test Dart classes using the test package. To test widget… ### 15.3 Integration Testing Integration test work in a pair. The goal here is to test how multiple units work together. Integration testing happens on a real device or emulators. We can fire a series of User interaction events and expect UI rendering or unit codes to be executed properly [An introduction to integration testing ](https://docs.flutter.dev/cookbook/testing/integration/introduction) — Unit tests and widget tests are handy for testing individual classes, functions, or widgets. However, they generally… Again, Check this Video series for detailed implementation of real App with TDD. ▶ Video: https://www.youtube.com/watch?v=KjE2IDphA_U&list=PLB6lc7nQ1n4iYGE_khpXRdJkJEp9WOech ### 15.4 BDD: Behavior-driven development TDD or Unit Tests helps when a stakeholder has strong technical skills. BDD is all about writing a test case from the end user’s perspective. This is written in a natural English language. Testcase can be written in the below format: **Given:** the initial context at the beginning of the scenario, in one or more clauses; **when:** the event that triggers the scenario; **then:** the expected outcome, in one or more clauses. Internally, a behavior test cases can be a Unit test, widget test, or a combination of both. BDD helps to understand software functionality from an end-user perspective and becomes a sort of functional documentation. Flutter has a [gherkin](https://cucumber.io/docs/bdd/better-gherkin/) that helps us writing Behaviour Test cases. [gherkin | Dart Package ](https://pub.dev/packages/gherkin) — A fully featured Gherkin parser and test runner. Works with Flutter and Dart 2. This implementation of the Gherkin… --- This Flutter guide for beginners covers all the basics that you would need to know to [start with flutter and develop your apps](https://www.solutelabs.com/flutter-app-development-services)! We hope this step by step Flutter tutorial helps you on your journey to Flutter. ## Frequently asked questions ### Is Flutter easy to learn? Yes! Compared to other cross-platfrom app development frameworks such as React Native, Ionic, etc., Flutter is easy to learn for the beginners and experienced developers. Flutter uses Dart programming language which is easy to learn for the developers looking to access at existing source code or write from scratch, compared to any OOP language such as Java, JS, etc. ### Is Flutter good for beginners? Two Flutter benefits makes it good for beginners- 1. Ease of learning to code using Dart programming language 2. Flexibility of building apps faster So, freshers looking to adopt Flutter as a skill should immediately start learning Flutter basics using this Tutorial. ### What is Flutter tutorial? Flutter tutorial is a step-by-step guide that teaches you how you can build natively rendered mobile applications for iOS and Android using Flutter framework. ### How long will it take to learn Flutter? The answer to this question boils down to familiarity. If you’ve been running the show with other UI toolkits for natively compiled applications for both web and mobile, two weeks is a safe bet. But then, if you’re immensely passionate or just have a lot of time on your hands, you can learn the ropes of Flutter over the weekend as well! ### How do you write a Flutter code? Once you create a correct local path to store the data, you need to create a reference to locate the files stored on the disk with the help of the File class from the Dart:io library. Then, using the '$counter' syntax, write data to the files. ### How do you read a Flutter code? You can read a Flutter code using the File class when you have some data already written on the disk. ### Which programming language is used in Flutter? The Flutter framework uses Dart as its primary programming language. Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps. ### Is Flutter backend or frontend? Flutter is a frontend development developed by Google that helps create a beautiful frontend for any screen size. ### Does Flutter have a future? Flutter is still early days for Flutter, but we know that many companies are already using it to build products. The list of known companies includes Alibaba, Atlassian, Capital One, Lyft, Netflix, PayPal, and others. ### Can I learn Flutter without Dart? Yes, you can learn Flutter without Dart. The Flutter team has put together an excellent [set of tutorials](https://www.solutelabs.com/blog/flutter-tutorial-for-beginners-step-by-step-guide) that you can use to learn the basics of Flutter. You'll have a much better understanding of what Flutter is and how it works after going through the tutorials. ### Which backend language is best for Flutter? You have popular options such as Firebase, AWS Amplify, and Parse to use with the Flutter framework. ### Should I learn Flutter in 2021? Absolutely! Here’s why: **Speed:** As a UI toolkit developed by Google, Flutter is the poster child for Fast and Furious. Flutter writes directly on the canvas so all the controls are recreated and rendered on to the screen. The bonus? Hot reloading. **Language:** Every developer’s love language is the one that can be learnt easily. Even though Dart is fairly recent, this modern language makes object oriented principles like Classes and Objects a breeze **Community:** You are not alone in your Flutter endeavours. The community is to the brim with events spanning across the globe and is always warm to a newcomer.