Flutter examples

Learn Flutter by easy-to-difficult examples.

Official document: https://flutter.dev/docs.

Reference

This project is based on react-native-expo-examples created by Robin Huy. Thank you!

Run project in development

Setting up the development environment: https://flutter.dev/docs/get-started/install.
Install dependencies: cd to project folder and run flutter pub get.

Run the app

For Vscode users: https://flutter.dev/docs/get-started/test-drive?tab=vscode.
For Android Studio or IntelliJ users: https://flutter.dev/docs/get-started/test-drive?tab=androidstudio.
For terminal: https://flutter.dev/docs/get-started/test-drive?tab=terminal

Preview

1. Hello World

Learn how to use: ThemeData, Scaffold, Center, Text, SafeArea, Align, Column, RichText, TextSpan, WidgetSpan, SizedBox, Container, and some style classes.

2. Login Screen

Learn how to use: GestureDetector, FocusScope, AnnotatedRegion, TextField, Row, Enum, MediaQuery, Image, Animation, ElevatedButton, TextEditingController, FocusNode, StatefulWidget and some widget lifecycle (initState, dispose) with event handler.

3. The Light

Learn how to use: Platform, Switch, Cupertino Widget and Material Widget, Transform and more about StatefulWidget.

4. Register Form

Learn how to use: AppBar, Form, GlobalKey, TextFormField, showDialog method and AlertDialog Widget, Navigator, AnimatedPadding and JsonCodec in dart:convert.

5. Instagram Feed

Learn how to use: More about AppBar, BottomNavigationBar, BottomNavigationBarItem, ListView and ListView builder, LinearGradient, CircleAvatar, ClipOval, Stack, Positioned, LayoutBuilder, TextPainter, some external libraries and how to declare data model.

6. Rock Paper Scissors

Learn how to use: More about Animation.

7. Stopwatch

Learn how to use: Provider pattern for state management, ChangeNotifier, ChangeNotifierProvider and notifyListeners , FontFeature, Expanded, FittedBox, ListTile, CupertinoButton, Timer.

8. Worldwide News

Learn how to use: Clean architecture and bloc pattern in Flutter, FadeInImage, Infinite scroll with ListView and some external packages like retrofit, flutter_bloc, get_it, equatable, lint, url_launcher, ... .

9. VNSE demo

Learn how to use: Carousel package, Dotted packge, Launcher icon and splash screen, More practice with Stack and Positioned, Multiple scroll direction with SingleChildScrollView.

Special thanks to linhkhanh.osbkl for this beautiful UI/UX design!

10. Online Course

Learn how to use: CupertinoTabBar, BottomNavigationBarItem and TabBarView, More about Navigator (1.0), *didChangeDependencies app lifecycle, flutter_svg package, How to customize a Flutter built-in widget (CustomExpansionTile) and extends a Flutter built-in widget (MainButton), ClipRRect.

Special thanks to Luky Erdianto for this beautiful design. Check out his work here.

11. Mijia Store

Learn how to use: More about Clean Architecture and Bloc Pattern (Cubit), More about Navigator (2.0) with Bloc and page transition, More about Animation, How to customize Bottom Navigation Bar.

Special thanks to Ivan Fadila for this beautiful design. Check out his work here.