Learn Flutter by easy-to-difficult examples

Overview

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

Run the app

Preview

1. Hello World

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

Hello World 1 Hello World 2

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.

Momo Login Facebook Login

3. The Light

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

Bulb Traffic Light

4. Register Form

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

Register Form

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.

Instagram Feed

6. Rock Paper Scissors

Learn how to use: More about Animation.

Rock Paper Scissors

7. Stopwatch

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

Stopwatch

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, ... .

Worldwide News

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!

Demo video

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.

Online Course homepage Online Course profile

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.

Online Course homepage Online Course profile

Online Course homepage Online Course profile

11. Pokédex (WIP)

Learn how to use: More about Clean Architecture with Bloc Pattern, Unit Test for Domain, Data and Bloc.

Special thanks to DanielMots for this UI. Check out his work here.

More feature coming soon!

Online Course homepage

More examples coming soon!

You might also like...

Flutter (web) app for the DevFest 2022 in HH, containing my slides as well as the examples used to talk about navigation

go_go_router A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Dec 15, 2022

Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Nov 1, 2022

A flutter widget to indicate loading progress. Easy to use, easy to extend

💙 👾 💫 A flutter widget to indicate loading progress. Easy to use, easy to extend

May 30, 2022

Flutter-course - Projects of the course to learn Flutter!

📱 Flutter Course Projects of the course to learn Flutter! 💡 What is it? Repo with all projects made during the Flutter Course provided by Daniel Cio

Jan 3, 2022

Flutter bloc infinite list - A sample application to learn flutter bloc the correct way

flutter_bloc_infinite_list A sample application to learn flutter bloc the correc

Aug 22, 2022

This is a simple flutter project of mine that i was trying to learn state managment in flutter with GetX.

managment This is my flutter project about state managment with GetX Getting Started This project is a starting point for a Flutter application. A few

Jul 9, 2022

A weather app built to learn how to use Canvas and Animation in Flutter.

A weather app built to learn how to use Canvas and Animation in Flutter.

Weather Quick Disclaimer I removed my private OpenWeather API key from the repo, if you want to get the weather forecast use your own in the openweath

Dec 21, 2022

Introductory course to learn Dart/Flutter

Flutter Workshop About Introductory course to learn mobile development using Dart/Flutter. The course is structured to allow you to select the content

Dec 17, 2022

Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_local_notifications plugin.

Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_local_notifications plugin.

Flutter Local Notifications Example Flutter Local Notifications - Learn how to implement local notifications into both Android and iOS using flutter_l

Nov 29, 2022
Owner
Cody
Cody
This Repository is contain about learn Flutter and Dart [Learn]

Flutter-Dart-Code-Learn-Journey This Repository is contain about learn Flutter and Dart [Learn] Introduction Learn Dart Data Type Control Flow Collect

Adi Nugraha Putra 1 Jan 11, 2022
null 1 Jan 8, 2022
ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Pooja Bhaumik 815 Jan 3, 2023
Flutter UI examples

Flutter UI demos 18 templates, Redux, CRUD Sqlite and Firebase, http request, webview, google and firebase auth, global notification strategy create a

Javier 1.4k Jan 6, 2023
Experimenting with 6 examples of different types of simple and complex JSON structures in Flutter

Parsing complex JSON in Flutter Gives a detailed explanation of working with simple and complex JSON structures using dart:convert library in Flutter

Pooja Bhaumik 488 Jan 6, 2023
This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.

Syncfusion Flutter examples This repository contains awesome demos of Syncfusion Flutter UI widgets. This is the best place to check our widgets to ge

Syncfusion 1.6k Jan 4, 2023
An examples of navigation with the Flutter and GetX libraries

Ejemplos de navegación en Flutter Dentro de este repositorio podrán acceder a ej

null 0 Dec 22, 2021
Examples for go-flutter

go-flutter-desktop/examples This repository contains some example applications that can be built using go-flutter. Compiled example Pre-compiled examp

null 231 Dec 18, 2022
Examples of all types of widgets used for animation in Flutter.

Anny Flutter application for learning animations concept. Checkout the live demo here. License Copyright 2020 Ashutosh Singh Licensed under the A

Ashutosh Singh 23 Nov 22, 2022
My flutter (android, ios) UI design examples 🎈 - user profile UIs, food order ui, splashscreen, mask widget usage, settings page ui

Flutter UI Design Examples ?? This repository contains the flutter ui designs I designed while learning. Doctor Appointment App UI Packages in use: fl

Aleyna Eser 23 Nov 14, 2022