Flutter Tutorial Last Updated : 17 Mar, 2025 Comments Improve Suggest changes Like Article Like Report This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When building applications with Flutter, everything is geared towards Widgets – the blocks with which the Flutter apps are built. The User Interface of the app comprises many simple widgets, each handling one particular job. That is why developers think of their Flutter app as a tree of devices.Compared to contemporary technologies like React Native, Kotlin, and Java, Flutter is much better regarding having a Single Codebase for Android and iOS, Reusable UI and Business Logic, high compatibility, performance, and productivity.PrerequisiteBefore diving into Flutter, it is important to have a strong grasp of Dart programming, familiarity with Android Studio, and knowledge of web scripting languages like HTML, JavaScript, and CSS. Table of Contents Basics Widgets UI Components Design & Animations Forms & Gestures Navigation & Routing Accessing Device Advance Concepts Flutter Apps Flutter - BasicsFlutter is a toolkit created by Google that lets developers build apps for mobile, web, and desktop using the same code. It uses the Dart programming language and comes with ready-to-use widgets for designing user interfaces. Flutter's special feature, hot reload, allows developers to see changes instantly as they code, making development faster. Let us check few basic topics about Flutter.Flutter - IntroductionFlutter – Architecture ApplicationAndroid Studio Setup for Flutter DevelopmentFlutter - Setup for application developmentFlutter Development on UbuntuFlutter - WidgetsIn this section, you will explore Flutter widgets, which are pre-built elements used to construct user interfaces in Flutter applications. Widgets in Flutter are versatile and customizable, ranging from basic components like buttons and text fields to complex layouts and animations. Flutter provides a rich library of built-in widgets that developers can use directly or customize to suit specific design requirements.Flutter - WidgetsFlutter – Stateful vs Stateless WidgetsMaterialApp class in FlutterScaffold class in FlutterFlutter - AppBar WidgetFlutter – FloatingActionButtonBottomNavigationBar Widget in FlutterDrawer Widget in FlutterContainer class in FlutterFlutter – SizedBox WidgetClipRRect Widget in Flutter Flutter - RichText WidgetListView Class in FlutterFlutter – GridViewFlutter - TextFieldVisit Flutter-Widgets to view more widgets.Flutter - UI Components Flutter provides a variety of widgets like buttons, text fields, and sliders that you can customize and arrange to create your app's user interface. In this section, you will explore Flutter's UI components, which are ready-made elements used to build the look and feel of your app.Icon Class in FlutterExpanded Class in FlutterFlutter – Checkbox WidgetFlutter - Carousel SliderFlutter - Staggered Grid ViewFlutter - Circular & Linear Progress IndicatorsAlert Dialog box in FlutterFlutter - DialogsFlutter - Handling videosFlutter - Expansion Tile CardFlutter - TabsFlutter - Horizontal ListFlutter - Working with ChartsFlutter - Convex BottombarFlutter - SlidableFlutter – SnackbarVisit: Flutter UI Components for moreFlutter - Design & AnimationsIn this section, you'll learn how to use these widgets to design buttons, text fields, and other elements that look great on both Android and iOS devices. Additionally, Flutter's powerful animation capabilities allow you to create smooth transitions and interactive effects, enhancing the user experience. Customizing Fonts in FlutterFlutter - ThemesFlutter - Auto size textFlutter - Skeleton TextFlutter - Animation in Route TransitionFlutter - Ripple EffectFlutter - Lazy LoaderFlutter - Radial Hero AnimationFlutter - Hinge AnimationFlutter - Lottie AnimationProgressIndicator in FlutterFlutter - Physics Simulation in AnimationFlutter - Using Google fontsFlutter - Rotate TransitionFlutter - Animated Splash ScreenFlutter - ShimmerRive animations in FlutterFlutter Forms & GesturesYou'll learn how to validate user inputs and handle form submissions efficiently. Additionally, Flutter simplifies the implementation of gestures like tapping, swiping, and pinching, enhancing user interaction within your applications. Form Validation in FlutterDesigning a Form Submission Page in FlutterFlutter - GesturesFlutter - Navigation & RoutingIn Flutter, Navigation refers to moving between different screens or pages in your app. Flutter provides a powerful and flexible navigation system that allows you to manage navigation stacks, pass data between screens, and handle transitions smoothly. Let us check how navigation and routing work in Flutter. Routes and Navigator in FlutterMulti-Page Applications in FlutterFlutter - Named RoutesFlutter - Arguments in Named RoutesFlutter - Return Data from ScreenURLs in FlutterRetrieve Data From TextFields in FlutterFlutter - WebSocketsFlutter - Avoiding JankFlutter - Updating Data on the InternetFlutter - Fetching Data From the InternetFlutter - Deleting Data On The InternetFlutter - Sending Data To The InternetFlutter - Send Data to ScreenFlutter - Send Data to the Screen using RouteSettingsFlutter - Accessing DeviceHere, you will explore how Flutter enables developers to access device features such as cameras, sensors, and storage. Flutter provides plugins that allow easy integration with device hardware and APIs, making it straightforward to utilize functionalities like taking pictures, accessing location data, or storing files locally.Gallery Access in FlutterCamera Access in FlutterBackground local notifications in FlutterRestrict Landscape Mode in FlutterFlutter - Advanced ConceptsIn this section, you will explore advanced concepts in Flutter, diving deeper into its capabilities beyond the basics. You'll learn about state management techniques to handle data and user interface changes efficiently. Discover how to integrate Flutter with backend services and APIs to fetch and display dynamic data in your applications. Explore advanced widget customization and animations to create visually appealing user interfaces.Flutter – Read and Write Data on FirebaseMail and SMS in FlutterMaking Calls in FlutterFAB - Speed Dial in FlutterFlutter - WakelockImplementing REST API in FlutterHTTP GET Response in FlutterFlutter App ProjectsIn this section, you will explore various Flutter app projects that showcase its versatility and capabilities. You'll discover examples ranging from simple to complex applications built using Flutter's user-friendly widgets and robust development tools.Basic Quiz App In Flutter APIA Hello World App Using FlutterCreating a Simple Application in FlutterFlutter – Simple PDF-Generating AppFlutter – Dice Roller AppFlutter – Magic 8-Ball AppWhy learn Flutter?There are some key features of Flutter: Cross-platform development: Flutter allows developers to write a single codebase for both Android and iOS, and it also reduces the time and costs of development.Fast development: It has a hot reload feature that allows developers to see the changes that occur in the code. It makes the development process faster and more efficient.Attractive UI: Flutter provides a rich set of customizable widgets that allow developers to create visually attractive and responsive user interfaces.Performance: Flutter uses the Dart programming language, and its efficient rendering engine, Skia, ensures high performance, fast app startup times, and smooth animations.Large community: Flutter has a growing and supportive community, which provides Flutter developers with vast documentation, resources, and third-party packages, which makes the development easy.Open-Source: Flutter is a free and open-source framework for developing mobile applications.Features of FlutterFeatures of the Flutter include:Cross-platform developmentSingle codebase for multiple platformsHot Reload for instant code changesRich UI with customizable widgetsFast performance and smooth animationsNative-like user experienceAccess to native features and APIsDart programming languageStrong community supportIntegration with existing codeTesting and debugging toolsOpen-source and freeAdvantages of FlutterFlutter comes with attractive and customizable widgets for high-performance and awesome mobile applications.Dart has a big repository of software packages that lets you develop the capabilities of your application.It requires lower testing. Because of its single code base, it is sufficient to write automated tests once for both IOS and Android platforms. Developers need to write just a single code base for both Android and IOS applications. Flutter’s simplicity makes it a good choice for fast development. Its customization capability and extensibility make it even more effective.Developers have full control over the widgets and their layout with Flutter.It offers amazing developer tools with great hot reload. Comment More infoAdvertise with us Next Article Flutter | An introduction to the open source SDK by Google abhishek1 Follow Improve Article Tags : Flutter Flutter Similar Reads BasicsFlutter TutorialThis Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When7 min readFlutter | An introduction to the open source SDK by GoogleFlutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch5 min readFlutter - Architecture ApplicationFlutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of3 min readAndroid Studio Setup for Flutter DevelopmentThis article will show how to set up Android Studio to run Flutter Applications. Android Studio is one of the popular IDE( integrated development environment  ) developed by Google itself to create cross-platform Android applications. First, you have to install Android Studio version 3.0 or later, a3 min readGetting Started with Cross-Platform Mobile Application using FlutterFlutter is an open-source mobile application development SDK created by Google to develop cross-platform mobile applications. Flutter makes it extremely easy and fast for even novice programmers (computer programmers who are not experienced in any programming languages) to build high-quality and res7 min readFlutter Development in Ubuntu 20.04In this article, let's look at how you can set up a development environment for Flutter if you're using Ubuntu 20.04. It was difficult earlier and was kind of a nightmare to get it done. But now, it has changed, and anyone can easily set up a flutter development environment on their Ubuntu system in5 min readKey WidgetsWhat is Widgets in Flutter?Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and5 min readContainer class in FlutterContainer class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas8 min readScaffold class in Flutter with ExamplesThe Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ ScaffoldThe constructor of the8 min readMaterialApp class in FlutterMaterialApp Class: MaterialApp is a predefined class or widget in flutter. It is likely the main or core component of a flutter app. The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK like Text widget, D7 min readDrawer Widget in FlutterDrawer widget is used to provide access to different destinations and functionalities provided in your application. It is represented by three horizontal parallel lines on the upper end of the scaffold. It has a horizontal movement from the edge of the Scaffold that navigates the link to different r5 min readFlutter - AppBar WidgetAppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give7 min readFlutter - RichText WidgetThe RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree. Depending on the layout constraints the text might break across multiple lines o3 min readUI ComponentsFlutter - TabsTabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To2 min readFlutter - Horizontal ListIn Flutter there can be Two types of lists, namely, horizontal list and vertical list. Both these lists are created using the ListView constructor and assigning the scrollDirection parameter. By default, the scroll direction parameter is vertical for a vertical list but it can be overridden by passi3 min readFlutter - Expansion Tile CardThe Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implement3 min readIcon Class in FlutterIcon class in Flutter is used to show specific icons in our app. Instead of creating an image for our icon, we can simply use the Icon class for inserting an icon in our app. For using this class you must ensure that you have set uses-material-design: true in the pubsec.yaml file of your object.Synt2 min readExpanded Class in FlutterWhen we create any child of a row or column we provide the size of the widget according to the screen size but sometimes when we provide more size of child as compared to screen size we get a warning and our widget goes out of the screen for resolving this we put a child of a row or column in an exp3 min readFlutter - DialogsThe dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ5 min readFlutter - Circular & Linear Progress IndicatorsProgress Indicator in any application displays the time which is needed for some tasks to complete such as downloading, installation, uploading, file transfer, etc. This shows the progress of a task or the time to display the length of the processes.In Flutter, progress can be displayed in two ways:4 min readFlutter - Staggered Grid ViewStaggered Grid View is a type of layout that is used to display images and posts. As you see in various social platforms such as Pinterest, Instagram and many more. The main feature of Staggered Grid View is that it makes the layout beautiful and develop a great User Experience. Staggered Grid View4 min readDesign & AnimationsCustomizing Fonts in FlutterCustomization is everywhere, from documents to apps, we can customize everything as we want to. The power of customization is humongous, and it has revolutionized the way we look at technology in this world. Just like how printing "Hello World", is the basic step towards learning a new programming l4 min readFlutter - Skeleton TextIn Flutter, the skeleton_text library is used to easily implement skeleton text loading animation. Its main application in a flutter app is to assure its users that the servers are working but running slow, but the content will eventually load. It also enhances the User Interface if the user connect3 min readFlutter - ThemesThemes are an integral part of UI for any application. Themes are used to design the fonts and colors of an application to make it more presentable. In Flutter, the Theme widget is used to add themes to an application. One can use it either for a particular part of the application like buttons and n3 min readFlutter - Lazy LoaderThe Lazy loader is a wrapper to the ScrollView that enables lazy loading. It is very useful in situations where the application's intent is to show endless content in a ListView. For instance, Instagram, Facebook, Youtube and most social networking platforms use them to deliver an endless stream of5 min readFlutter - UI OrientationAll applications should be able to adjust their User Interface (UI) based on the orientation of the phone. By orientation, we implicate the portrait and landscape mode in smartphones rather the physical orientation. In, Flutter it is done so by using the OrientationBuilder, which determines the app'2 min readFlutter - Animation in Route TransitionRoutes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition3 min readFlutter - Physics Simulation in AnimationPhysics simulation in Flutter is a beautiful way to Animate components of the flutter app to make it look more realistic and interactive. These can be used to create a range of animations like falling objects due to gravity to making a container seem attached to a spring. In this article, we will ex4 min readFlutter - Radial Hero AnimationA Radial transformation means turning a circular shape into a square shape. In Radial Hero animation the same is done with a Hero. In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamenta3 min readFlutter - Hinge AnimationAnimations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil4 min readFlutter - Lottie AnimationVisualization is an integral part of any application. Animations can highly glorify the UI of an app, but animations can be hectic to implement for an application. This is where the Lottie animation comes in. Lottie is a JSON-based animation file. It can be used both as a network asset and a static3 min readForms & GesturesForm Validation in FlutterForm Validation is an important part of every application. In the flutter application, there are many ways to validate form such as using a TextEditingController. But handling text controller for every Input can be messy in big applications. Hence, Form provides us a convenient way to validate user3 min readDesigning a Form Submission Page in FlutterThere are many ways to submit user-input data in Flutter. But the most used way is using TextFields. But there is a drawback of using TextFields it requires controller of the every text field you create in Flutter. So to Overcome makes the use of Forms. Forms in flutter don't need any textController3 min readFlutter - GesturesGestures are used to interact with an application. It is generally used in touch-based devices to physically interact with the application. It can be as simple as a single tap on the screen to a more complex physical interaction like swiping in a specific direction to scrolling down an application.3 min readNavigation & RoutingURLs in FlutterWhile surfing the net, every user will come across many buttons, text, etc., that would redirect the user to a different webpage in the same tab or in a different tab when clicked. In the same way, when a developer links a URL to a button or text in an app, the app will open the website when clicked5 min readRoutes and Navigator in FlutterRoute: Apps are the new trend. The number of apps available in the Play Store and App Store nowadays is quite a lot. The apps display their content in a full-screen container called pages or screens. In flutter, the pages or screens are called Routes. In android, these pages/screens are referred to4 min readFlutter - WebSocketsWebSockets are used to connect with the server just like the http package. It supports two-way communication with a server without polling.In this article, we will explore the below-listed topics related to WebSockets in Flutter:Connecting to a WebSocket serverListen to messages from the server.Send3 min readFlutter - Named RoutesAn app has to display multiple screens depending upon the user's needs. A user needs to back and forth from the multiple screens to the home screen. In, Flutter this is done with the help of Navigator.Note: In Flutter, screens and pages are called routes. Steps to Implement Named Routes in FlutterSt3 min readFlutter - Arguments in Named RoutesNavigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can4 min readMulti Page Applications in FlutterApps are widely used by humans in this techie world. The number of apps in the app store is increasing day by day. Due to this competition, app developers have started to add a number of features to their apps. To reduce this complexity, the content of the app is mostly divided into various pages so5 min readFlutter - Updating Data on the InternetIn today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St5 min readFlutter - Fetching Data From the InternetIn today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap4 min readFlutter - Deleting Data On The InternetIn this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us4 min readFlutter - Sending Data To The InternetInteracting with the Internet is crucial for most apps to function. In Flutter, sending data to the internet is one of them, and the http package is used to send the data to the internet. In this article, we will explore the same topic in detail. Steps to Implement Sending Data to the InternetStep 15 min readFlutter - Send Data to ScreenInteraction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl4 min readHardware InteractionGallery Access and Camera in FlutterWe can add images from the gallery using the image_picker package in Flutter. For this, you'll need to use your real device.Steps to Implement Gallery and Camera AccessStep 1: Create a new flutter applicationCreate a new Flutter application using the command Prompt. To create a new app, write the be3 min readCamera Access in FlutterTo add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a3 min readBackground local notifications in FlutterSometimes user wants some essential features like the latest news updates, latest articles updates, weather condition alert, complete his/her profile update, future events update and much more in his/ her Android or iOS device without opening App and if you would like to develop this kind of Android6 min readRestrict Landscape mode in FlutterIn this article, we'll learn how to restrict landscape mode in the flutter app. A production-ready app should be free from all sorts of bugs and errors. Mostly, we design our app for portrait orientation if we flip to landscape orientation, the UI might not be adjusted for that. So, there are two ca2 min readSample Flutter AppsBasic Quiz App In FlutterFlutter SDK is an open-source software development kit for building beautiful UI that is natively compiled. Currently, it is available as a stable version for iOS and Android OS. In this app, we are going to have the features or modules mentioned below:Five multiple-choice questions ( more questions8 min readA Hello World App using FlutterIn Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgetsStateless WidgetStateful WidgetInherited WidgetIn this article, we will use S3 min readFlutter - Simple PDF Generating AppFlutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f9 min readFlutter - Magic 8 Ball AppWe will be building a Magic 8-Ball app that will give you the answers to all fun, tricky questions (basically, it is a fun game app that will change its state of image using Textbutton in Stateful widgets). For this, we will use Stateless and Stateful Flutter widgets and a Textbutton. Steps to build3 min readAdvance ConceptsFlutter - Read and Write Data on FirebaseFirebase helps developers to manage their mobile apps easily. It is a service provided by Google. Firebase has various functionalities available to help developers manage and grow their mobile apps. In this article, we will learn how to write and read data into/from Firebase. Follow the 3-step proce4 min readMail and SMS in FlutterThe world works in text. From advertisements to conversations, text is everywhere. The most popular modes of official textual communication are Mail followed by SMS. Companies use these modes to communicate not only with their employees but also with their customers. This has led app developers to i5 min readMaking Calls in FlutterIn this online world, customer care plays a major role in the success of a company. Users are quite satisfied when they converse with the executives through calls. This has forced companies to add phone numbers to their apps for their customers to contact them easily. But dialing those numbers from7 min readFAB - Speed Dial in FlutterA floating action button, commonly abbreviated as FAB, is a primary action button that has a fixed position hovering over an app without altering the contents of the screen. Speed dial is a transition type of FAB, where it emits multiple entities as an action of an FAB on the same screen.Floating Ac5 min readFlutter WakelockThe wakelock_plus package in Flutter is used to keep the screen awake. It can be adjusted according to the requirements (how long to stay awake). These are straightforward things that enhance the quality of the app and increase the user-friendliness of the same.In this article, we will explore the p3 min readHTTP GET Request in FlutterThere is no use of building a UI in Flutter until you integrate it with your backend. A GET request is used to extract useful data from your backend to use it in your application.Steps to implement HTTP GET RequestStep 1 : Create a new Flutter ApplicationCreate a new Flutter application using the co3 min read Like