Skip to main content
Flutter
Docs
Guides
Learn
AI
Reference
search
routine
light_mode
Light
dark_mode
Dark
night_sight_auto
Automatic
apps
Flutter
Flutter
Docs
Flutter
API
Flutter
Blog
Dart
DartPad
pub.dev
Get started
menu
close
asterisk
Guides
play_lesson
Learn
auto_awesome
AI
api
Reference
Get started
Quick start
Custom setup
Learn Flutter
User interface
palette
Introduction
view_module
Widget catalog
expand_more
Overview
Design systems
expand_more
Cupertino
Material components
Base widgets
expand_more
Accessibility
Animation
Assets
Async
Basics
Input
Interaction
Layout
Painting
Scrolling
Styling
Text
view_quilt
Layout
expand_more
Introduction
Build a layout
Lists & grids
expand_more
Create and use lists
Create a horizontal list
Create a grid view
Create lists with different types of items
Create lists with spaced items
Work with long lists
Scrolling
expand_more
Overview
Use slivers to achieve fancy scrolling
Place a floating app bar above a list
Create a scrolling parallax effect
devices
Adaptive & responsive design
expand_more
Overview
General approach
SafeArea & MediaQuery
Large screens & foldables
User input & accessibility
Capabilities & policies
Automatic platform adaptations
Best practices
Additional resources
palette
Design & theming
expand_more
Share styles with themes
Material design
Migrate to Material 3
Text
expand_more
Fonts & typography
Use a custom font
Export fonts from a package
Google Fonts package
open_in_new
Custom graphics
expand_more
Use custom fragment shaders
touch_app
Interactivity
expand_more
Add interactivity to your app
Gestures
expand_more
Introduction
Handle taps
Drag an object outside an app
Drag a UI element within an app
Add Material touch ripples
Implement swipe to dismiss
Input & forms
expand_more
Create and style a text field
Retrieve the value of a text field
Handle changes to a text field
Manage focus in text fields
Build a form with validation
Display a snackbar
Implement actions & shortcuts
Manage keyboard focus
photo_library
Assets & media
expand_more
Add assets and images
Display images from the internet
Fade in images with a placeholder
Play and pause a video
Transform assets at build time
alt_route
Navigation & routing
expand_more
Overview
Add tabs to your app
Navigate to a new screen and back
Send data to a new screen
Return data from a screen
Add a drawer to a screen
Display a Cupertino sheet
Set up deep linking
Set up app links for Android
Set up universal links for iOS
Configure web URL strategies
animation
Animations & transitions
expand_more
Introduction
Tutorial
Implicit animations
Animate the properties of a container
Fade a widget in and out
Hero animations
Animate a page route transition
Animate using a physics simulation
Staggered animations
Create a staggered menu animation
API overview
accessibility
Accessibility
expand_more
Introduction
UI design & styling
Assistive technologies
Accessibility testing
Web accessibility
translate
Internationalization
Beyond UI
storage
Data & backend
expand_more
State management
expand_more
Introduction
Think declaratively
Ephemeral vs app state
Simple app state management
Options
Networking & http
expand_more
Overview
Fetch data from the internet
Make authenticated requests
Send data to the internet
Update data over the internet
Delete data on the internet
Communicate with WebSockets
Serialization
expand_more
JSON serialization
Parse JSON in the background
Persistence
expand_more
Store key-value data on disk
Read and write files
Persist data with SQLite
Firebase
expand_more
Overview
Add Firebase to your Flutter app
open_in_new
Google APIs
account_tree
App architecture
expand_more
Introduction
Architecture concepts
Guide to app architecture
Architecture case study
expand_more
Overview
UI layer
Data layer
Dependency injection
Testing each layer
Recommendations
Design patterns
integration_instructions
Platform integration
expand_more
Supported platforms
Build desktop apps with Flutter
Write platform-specific code
Bind to native code
Android
expand_more
Set up Android development
Add a splash screen
Add predictive back
Host a native Android view
Calling JetPack APIs
Launch a Jetpack Compose activity
Restore state on Android
Target ChromeOS with Android
Protect your app's sensitive content
Request local network permissions
iOS
expand_more
Set up iOS development
Leverage Apple's system libraries
Add a launch screen
Add iOS App Clip support
Add iOS app extensions
Host a native iOS view
Enable debugging on iOS
Restore state on iOS
Linux
expand_more
Set up Linux development
Build a Linux app
macOS
expand_more
Set up macOS development
Build a macOS app
Host a native macOS view
Web
expand_more
Web support in Flutter
Set up web development
Set up a configuration file
Build a web app
Compile to WebAssembly
Customize app initialization
Add Flutter to any web app
Web content in Flutter
Display images on the web
Web FAQ
Windows
expand_more
Set up Windows development
Build a Windows app
extension
Packages & plugins
expand_more
Use packages & plugins
Package dependency management
Develop packages & plugins
Ship skills with packages
open_in_new
Swift Package Manager
expand_more
For app developers
For plugin authors
Flutter Favorites
Package repository
open_in_new
bug_report
Testing & debugging
expand_more
Testing
Overview
Unit testing
expand_more
Introduction
Mock dependencies
Widget testing
expand_more
Introduction
Find widgets
Simulate scrolling
Simulate user interaction
Integration testing
expand_more
Introduction
Write and run an integration test
Profile an integration test
Test a plugin
Handle plugin code in tests
Debugging
Debugging tools
Debug your app programmatically
Use a native language debugger
Common Flutter errors
Handle errors
Report errors to a service
speed
Performance & optimization
expand_more
Overview
Impeller
Impeller anti-aliasing
Performance best practices
App size
Deferred components
Rendering performance
Performance profiling
Performance profiling for web
Performance metrics
Concurrency and isolates
Performance FAQ
Appendix
rocket_launch
Deployment
expand_more
Obfuscate Dart code
Create app flavors for Android
Create app flavors for iOS and macOS
Create app flavors for Linux
Create app flavors for Windows
Build and release an Android app
Build and release an iOS app
Build and release a macOS app
Build and release a Linux app
Build and release a Windows app
Build and release a web app
Set up continuous deployment
add_circle
Add to an existing app
expand_more
Introduction
Add to an Android app
expand_more
Set up Android project
Add a single Flutter screen
Add a Flutter Fragment
Add a Flutter View
Use a Flutter plugin
Add to an iOS app
expand_more
Set up iOS project
Add a single Flutter screen
Add to an macOS app
expand_more
Set up macOS project
Add a single Flutter screen
Add to a web app
Debug embedded Flutter module
Add multiple Flutter instances
Loading sequence and performance
AI
smart_toy
Develop with AI
expand_more
Get started
How AI tools work
Package skills
open_in_new
auto_awesome
Build AI-powered apps
expand_more
Firebase AI Logic
open_in_new
Genkit Dart
open_in_new
GenUI SDK for Flutter
expand_more
Overview
Main components and concepts
Get started
Input and events
Flutter AI Toolkit
expand_more
Overview
User experience
Feature integration
Custom LLM providers
Chat client sample
AI best practices
expand_more
Overview
Prompting
Structure and output
Tool calls (aka function calls)
Mode of interaction
Resources
construction
Tools & editors
expand_more
Android Studio & IntelliJ
Visual Studio Code
DevTools
expand_more
Overview
Run from Android Studio & IntelliJ
Run from VS Code
Run from command line
Flutter inspector
Performance view
CPU Profiler view
Memory view
Debug console view
Network view
Debugger
Logging view
App size tool
DevTools extensions
Build a custom tool
Validate deep links
Release notes
Flutter Widget Previewer
Flutter Property Editor
SDK overview
Flutter's pubspec options
Automated fixes
Code formatting
lightbulb
Flutter concepts
expand_more
Architectural overview
Inside Flutter
Understanding constraints
Flutter's build modes
Hot reload
Dot shorthands
apps
App solutions
expand_more
Develop with Firebase
expand_more
Overview
Discover Firebase for Flutter
open_in_new
Get to know Firebase for Flutter
open_in_new
Add a user authentication flow to a Flutter app using FirebaseUI
open_in_new
Get to know Firebase for web
open_in_new
Build multi-platform games
expand_more
Overview
Add achievements and leaderboards
Build leaderboards with Firestore
open_in_new
Add advertising
Add multiplayer support
Add in-app purchases
open_in_new
Add user authentication
open_in_new
Debug using Crashlytics
open_in_new
Intro to Flame with Flutter
open_in_new
Monetize your app
expand_more
Integrate ads
expand_more
Ads overview
Add advertising
Add AdMob ads to your Flutter app
open_in_new
Add an AdMob banner and native inline ads
open_in_new
Integrate multimedia ads (video)
open_in_new
Google AdMob mediation
open_in_new
Interactive Media Ads SDK
open_in_new
Support payments
expand_more
Payments overview
Google pay package
open_in_new
Add in-app purchases
open_in_new
Integrate maps
expand_more
Add Google maps to a Flutter app
open_in_new
Google Maps package
open_in_new
devices
From another platform?
expand_more
Flutter for Android devs
Flutter for Jetpack Compose devs
Flutter for SwiftUI devs
Flutter for UIKit devs
Flutter for React Native devs
Flutter for web devs
Flutter for Xamarin.Forms devs
Introduction to declarative UI
Flutter versus Swift concurrency
update
Stay up to date
expand_more
Release notes
Breaking changes
Compatibility policy
Flutter blog
open_in_new
What's new in the docs
computer
Manage install
expand_more
Overview
Install manually
Install with VS Code
SDK archive
Upgrade SDK
Add to path
Troubleshoot
Uninstall SDK
library_books
Resources
expand_more
Samples & tutorials
FAQ
Videos
Courses
Glossary
Get support
Contribute
expand_more
Contribute to Flutter
Create useful bug reports
Discover proposed features
Reference
expand_more
Who is Dash?
Widget index
Create a new app
flutter CLI
API docs
open_in_new
list
On this page
chevron_right
Flutter for React Native developers
vertical_align_top
Flutter for React Native developers
Introduction to Dart for JavaScript Developers (ES6)
Entry point
Printing to the console
Variables
Checking for null or zero
Functions
Asynchronous programming
The basics
How do I create a Flutter app?
How do I run my app?
How do I import widgets?
What is the equivalent of the React Native "Hello world!" app in Flutter?
How do I use widgets and nest them to form a widget tree?
How do I create reusable components?
Project structure and resources
Where do I start writing the code?
How are files structured in a Flutter app?
Where do I put my resources and assets and how do I use them?
How do I load images over a network?
How do I install packages and package plugins?
Flutter widgets
Views
What is the equivalent of the View container?
What is the equivalent of FlatList or SectionList?
How do I use a Canvas to draw or paint?
Layouts
How do I use widgets to define layout properties?
How do I layer widgets?
Styling
How do I style my components?
How do I use Icons and Colors?
How do I add style themes?
State management
The StatelessWidget
The StatefulWidget
What are the StatefulWidget and StatelessWidget best practices?
Props
Local storage
How do I store persistent key-value pairs that are global to the app?
Routing
How do I navigate between screens?
How do I use tab navigation and drawer navigation?
Gesture detection and touch event handling
How do I add a click or press listeners to a widget?
Making HTTP network requests
How do I fetch data from API calls?
Form input
How do I use text field widgets?
How do I use Form widgets?
Platform-specific code
Debugging
What tools can I use to debug my app in Flutter?
How do I perform a hot reload?
How do I access the in-app developer menu?
Animation
How do I add a simple fade-in animation?
How do I add swipe animation to cards?
React Native and Flutter widget equivalent components
Flutter 3.47 is here! Read the
blog post
.