Giter VIP home page Giter VIP logo

flutter-examples's Introduction

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!

flutter-examples's People

Contributors

cody0203 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

ilyasabd mpersic

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.