Flutter
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Flutter works with existing code, is used by developers and organizations around the world(examples), and is free and open source.
Why Flutter?
- One Codebase, Every Platform
- Integration, Flexibility and Scalability Capabilities
- Fast Development
- Expressive and Flexible UI
- Native Performance and Internationalised Flutter Libraries
- Great Range of pre-built Components
- Huge Widget Library
- Hot Reload
Get Flutter SDK
To get the latest verion of Flutter SDK, follow these steps.
Basic Crash Course
For starting flutter with basics, setting it up and get an idea about various things, you can follow this crash course video by Flutter Mapp.
Complete Courses
- For learning deep concepts of flutter and become a flutter expert, you can go with this free course by freeCodeCamp.org.
- Complete Flutter App Development Bootcamp with Dart - created in collaboration with the Google Flutter team, covering all the fundamental concepts for Flutter development.
Topics to Cover
| S.No. | Topic | Link |
|---|---|---|
| 1. | Widgets | Link Link Link |
| 2. | Basic Calculator App | Link |
| 3. | Local JSON Usage | Link |
| 4. | Page Routing | Link |
| 5. | Dynamic Theming | Link |
| 6. | Forms and Validation | Link |
| 7. | Async Programming | Link |
| 8. | HTTP Request (REST API) | Link Link |
| 9. | State Management (Provider) | Link Link |
| 10. | State Management (BLoC) | Link Link |
| 11. | Access Camera | Link |
| 12. | QR Code Scanner | Link |
| 13. | Image Handling | Link |
| 14. | PDF Viewer | Link |
| 15. | Basic Custom Clipping | Link |
| 16. | Advanced Custom Clipping | Link |
| 17. | Animations | Link |
| 18. | Complex UI | Link |
State Management with BLoC in Flutter
BLoC (Business Logic Component) is a powerful state management pattern in Flutter.
- Key Features:
- Separation of Concerns for maintainable code.
- Reactive Programming using streams for real-time data flow.
- Tutorials and Resources:
Master BLoC for responsive, maintainable Flutter apps.
Exploring
Here are a few starter apps that you can explore and learn from:
Google is Not Your Friend
Just Kidding! Google is indeed your friend but for flutter developers, there is a better platform - pub.dev. You can great range of pre-built packages and plugins which can be used in your code to make your work easy.
Whatever design you wanna make or any functionality you wanna implement which seems difficult will surely be possible using this.
pub.dev is a platform where you don’t only get code, but you can also contribute by making your own packages and plugins.
Some Cool Stuff
- Click Here to Explore
- Click Here to Explore
- Online Compiler - Click Here
- CodePen Support - Click Here
Flutter Web
In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.
Getting Started
If you have gone through the above content, you already know how to make a website using Flutter because Flutter uses exactly the same codebase to render a functional WebApp as well.
Some Differences
Though Flutter Web uses same codebase, but some things are handled differently in a Web App like routing, etc. Simple tutorials for these things can be found here.
Deploying Flutter WebApps
Flutter Web sometimes seems quite tedious to deploy on a web server, but Netlify has got you covered.
Netlify helps to deploy Flutter Web app in a few simple steps. Entire process to deploy a Flutter Web application can be found here.