Sample code for Flutter tutorials

Overview

Welcome to Flutter ShareWhatYouKnow 👋

License: Apache License, Version 2.0 (the "License") Twitter: ulusoyapps

In this Github repository I share the source code for the tutorial articles that I published. You can find the links to the articles below. Please follow my Medium page to stay up-to-date whenever I share a new content!


001 - THEME SWITCH

In this series of articles, I talk about implementing a design system for a Flutter app so that we can easily switch between three themes made for three different companies.

theme_switch_demo.gif

Imagine you have a B2B app to be used by the customers or employers of different companies. You can choose to implement only one app theme for all companies. Alternatively, your app can apply company-specific themes to increase brand awareness when a user is identified.

It may sound like a big cost to maintain multiple themes in an app, but when carefully done, it is actually not a big deal. In fact, it forces you to write cleaner code with separate concerns and less repetition.

There are many blog posts and tutorials on switching between dark and light themes in Flutter. However, brightness is only one aspect of a theme. A theme is a collection of attributes that are applied to all screens of an application. In this article, I discuss how to apply 3 different themes in an app and switching between them.

The distinct theme properties will be color, typography, icons, shape, and brightness. In the demo project, I implemented themes for the following imaginary companies: ATA, Biohack, and Codeland. Note that in the app there are intentional design mistakes which are mentioned in these posts for demonstration purposes.

companies

Here are the links for the articles:

  • Switching Between Client Specific Themes for B2B Flutter Apps - Part I: Design
  • Switching Between Client Specific Themes for B2B Flutter Apps - Part II: Implementation
  • Usage (Theme Switch )

    To start the app with the command line, first open an iOS simulator, Android Virtual device, or a physical device. Then type the following commands on the command line:

    flutter run lib/001-theme-switch-with-providers/main.dart



    002 - NAVIGATOR 2.0

    Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 1: Introduction

    The Navigator 2.0 API gives more control to Flutter developers to implement the application navigation by introducing multiple components with separated responsibilities. When it was announced, many Flutter devs, including me, initially found this new way of navigation complicated and hard to use due to the lack of training materials and samples. The Flutter team is well aware of this situation, and they started Navigator 2.0 API Usability Research. Anyone can contribute to this research project and engage in the discussions.

    I was too close to give up on migrating to the new Navigator API too, but I wanted to get benefit from it for my side project to provide a better Web application user experience. After going through the source code, reading the Github discussions, and experimenting a lot with a demo project, I would like to share my learnings in this series of articles.

    The Flutter team presented the Navigator 2.0 API with an article that gives too much information to digest. I think the article could have been split into smaller parts and covered more common scenarios such as authentication, bootstrapping, deep-link handling, etc. I am sure many blog posts from the Flutter community will help to close this gap. I also hope that this series of articles will be useful for the community.

    PART 2: User Interaction

    Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 2: User Interaction

    In the first sample app, we introduce the Router widget and its delegates. Then we explain how to build a navigation stack according to the app state changes. We focus on the following user interactions causing the app state changes:

  • Selecting a color and shape border type by pressing the buttons in the lists
  • Pressing the back button in the app bar
  • Pressing the system back button (Android only)

  • navigator2_01.gif

    Usage (Part-2):

    To start the app with the command line, first open an iOS simulator, Android Virtual device, or a physical device. Then type the following commands on the command line:

    cd 002-navigator2 && flutter run -d chrome lib/002-01-mobile-only/main_002_01.dart
    


    PART 3: Authentication

    Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 3: Authentication

    In the second sample, we add the authentication use case and build the navigation stack according to the authentication state changes.


    navigator2_02.gif

    Usage (Part-3):

    To start the app with the command line, first open an iOS simulator, Android Virtual device, or a physical device. Then type the following commands on the command line:

    cd 002-navigator2 && flutter run -d chrome lib/002-02-mobile-only-with-auth/main_002_02.dart
    


    PART 4: Bootstrapping

    Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 4: Bootstrapping

    In the fourth sample, we we handle the bootstrapping process and build the navigation stack accordingly.


    navigator2_03.gif

    Usage (Part-4):

    To start the app with the command line, first open an iOS simulator, Android Virtual device, or a physical device. Then type the following commands on the command line:

    cd 002-navigator2 && flutter run -d chrome lib/002-03-mobile-only-with-auth-and-bootstrap/main_002_03.dart
    


    PART 5: Web

    Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 5: Web

    In the fourth sample, we focus on two things:

  • Application state changes caused by user interaction, authentication state update, and bootstrapping.
  • Popping the current route requests from the operating system.

  • navigator2_01.gif

    Usage (Part-5):

    To start the app with the command line type the following commands on the command line:

    cd 002-navigator2 && flutter run -d chrome lib/002-04-mobile-and-web-with-auth-and-bootstrap/main_002_04.dart
    



    003 - SINGLE PAGE SCROLLABLE WEBSITE WITH NAVIGATOR 2.0

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 1: Introduction

    Single page scrollable websites are everywhere. In this website design pattern, all the content is presented in one long-scrolling layout that contains multiple sections. Visitors can scroll or jump to a section by clicking buttons of a sticky menu. This pattern is a good fit for small content such as brochure websites, software library documentation, portfolios, and landing pages that are used to convert users. Designers also love this pattern because it is simple, clean, and enables cool scroll animations.

    In this series of articles, we will explore how to build a single-page scrollable website using Flutter. We will benefit from the Navigator 2.0 API to provide a good navigation experience to the users.

    We want to achieve the following goals for our single page scrollable website samples:

  • Clicking a button in the top or side navigation menu bar will scroll the page to the corresponding section
  • The URL on the Web browser’s address bar should be updated according to the button clicks on the navigation menu and the first visible section as the user scrolls on the home page.
  • When the user enters a URL on the address bar, the Web application should show the corresponding section.
  • When the Web browser’s back and forward buttons are clicked the URL on the address bar and the first visible section should be updated correctly.
  • If the user types an unknown path in the address bar, a page with an error text is shown to the user.


  • PART 2: Scroll To Position

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 2: Scroll To Position

    In the first sample app, we will build the scrollable content using the ListView.builder constructor. Calling this method creates a ListView whose items are created lazily (on-demand). The itemBuilder parameter creates an item for a given index and it is called when the index is visible as the user scrolls onto the screen.


    singlePageWebsite_01.gif

    Usage (Part-2):

    To start the app with the command line type the following commands on the command line:

    003-single-page-scrollable-website && flutter run -d chrome lib/003-01-scroll-to-position/main_003_01.dart
    


    PART 3: Scroll to Page

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 3: Scroll to Page

    The second sample app is very similar to the first sample app. In this sample, we will use PageView instead of ListView . PageView widget is a scrollable list whose children have the same size which is equal to the viewport size by default. Each item in the list is called a page. We can consider the PageView widget as a ListView but more tailored for items of equal size.


    singlePageWebsite_02.gif

    Usage (Part-3):

    To start the app with the command line type the following commands on the command line:

    cd 003-single-page-scrollable-website && flutter run -d chrome lib/003-02-scroll-to-page/main_003_02.dart
    


    PART 4: Ensure Visible

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 4: Ensure Visible

    In the third sample app, we will learn how to live with the expense of laying out all the list items with various heights. We will use SingleChildScrollView which is a scrollable box usually used with a Column . To achieve the scroll requirements, we will do the following:

  • Create a widget list containing all the color section widgets.
  • Assign a GlobalKey to each section widget.
  • Set the color section widget list as the children of the Column widget and provide the Column to the SingleChildScrollView as its child.
  • When we want to scroll to an index programmatically, we will get the GlobalKey of the color section widget and provide the currentContext of the GlobalKey as a parameter to Scrollable.
  • The ensureVisible method ensures that the widget with the given context is visible.

    Note that this way of scrolling to an item is the most expensive one among all options in terms of performance. If the number of the sections are small, and the sections are not content-heavy, using SingleChildScrollView + Column could be the easiest solution.


    singlePageWebsite_03.gif

    Usage (Part-4):

    To start the app with the command line type the following commands on the command line:

    cd 003-single-page-scrollable-website && flutter run -d chrome lib/003-03-ensure-visible/main_003_03.dart
    


    PART 5: Scroll To Index

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 5: Scroll To Index

    In the previous samples, we utilized Flutter’s built-in solutions for creating a list of sections either lazily or at once. There is still a less expensive way of laying out the list items with unpredictable height on-demand (lazily) and scroll to an index thanks to the Scrollable Positioned List library by google.dev.

    This library solves jumping to a section that has not yet laid out in a very clever way:
  • If the destination section index is too far from the current index (not yet laid out), the widget uses a new list in addition to the current one.
  • The scrolling is started in both lists at the same pace.
  • The newly created list fades over the old list and starts showing the items that are close to the target.
  • When the scrolling reaches the target, the newly created list is already fully visible and stops.
  • The offset of the new list is set to 0 and the old list becomes invisible.

  • singlePageWebsite_04.gif

    Usage (Part-5):

    To start the app with the command line type the following commands on the command line:

    cd 003-single-page-scrollable-website && flutter run -d chrome lib/003-04-scroll-to-index/main_003_04.dart
    


    PART 7: Query Params

    Flutter for Single-Page Scrollable Websites with Navigator 2.0 — Part 7: Query Params

    In the last 4 sample apps, we use path segments with path variables in URLs:

  • constant colors text as the first path segment
  • a path variable that stands for hex color code as the second path segment
  • a shape border type path variable as the third segment
  • http://localhost:57155/colors/ffeb3b/circle
    

    In the fifth sample app, we will use query parameters in URLs with one path segment called section which contains two query parameters color and borderType.

    http://localhost:57073/section?color=ffeb3b&borderType=circle
    

    singlePageWebsite_05.gif

    Usage (Part-7):

    To start the app with the command line type the following commands on the command line:

    cd 003-single-page-scrollable-website && flutter run -d chrome lib/003-05-query-params/main_003_05.dart
    

    Author

    👤 Cagatay Ulusoy

    Show your support

    Give a ⭐️ if this project helped you!

    📝 License

    Copyright © 2020 Cagatay Ulusoy.
    This project is Apache License, Version 2.0 (the "License") licensed.


    This README was generated with ❤️ by readme-md-generator

    You might also like...

    Sample code for "A Game of Darts" tutorial

    These are small Dart samples used by the online Dart tutorials. Each directory in this repo represents a tutorial. The homepage field in each pubspec

    Sep 17, 2022

    Code-quizzy - Code Quizzy Application Built With Flutter

    Code-quizzy - Code Quizzy Application Built With Flutter

    Flutter Code Quizzy Application Configuration for this application Fortunately,

    Jan 1, 2023

    Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

    Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

    Dart_Native Dart_Native operates as both a code generator tool and a bridge to communicate between Dart and native APIs. Replaces the low-performing F

    Jan 4, 2023

    A Flutter mobile application built completely using DhiWise and Supabase without coding single line of code. With 100% system generated code

    A Flutter mobile application built completely using DhiWise and Supabase without coding single line of code. With 100% system generated code

    Flutter Expension Getting Started with Flutter 🚀 Generated with ❤️ from Dhiwise A Flutter mobile application built completely using DhiWise and Supab

    Oct 23, 2022

    A full screen mobile scanner for scanning QR Code and Bar Code.

    Flutter QR Bar Scanner A Full Screen Scanner for Scanning QR code and Barcode using Google's Mobile Vision API Reading & Scanning QR/Bar codes using F

    Oct 5, 2022

    Verify code input. You can create a verify code input.

    flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

    Dec 7, 2022

    Verify code input. You can create a verify code input.

    flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

    Dec 7, 2022

    Enum extendable - Dart code generator. Generates enum extensions code.

    Generates code for the extension on an enum. Overview Being able to add fields and methods to an enum. Let's say we have the following enum: enum Math

    Jan 10, 2022

    Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

    Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

    Here is described test tasks for a android dev. Need to implement three screens:

    Oct 4, 2022
    Comments
    • not a valid Dart package name

      not a valid Dart package name

      I guess the folder name should be changed.

      PS C:\Flutter-ShareWhatYouKnow\002-navigator2> flutter create . "002-navigator2" is not a valid Dart package name.

      Thanks.

      opened by asashour 0
    Owner
    Cagatay Ulusoy
    Cagatay Ulusoy
    Repository containing source code for the tutorials made using firebase with flutter

    Firebase-Flutter Tutorials Repository Containing Source code for tutorials found here: https://petercoding.com Note: Don't forgot to run pub get or ju

    Peter Haddad 231 Dec 21, 2022
    The repo contains the source code for all the tutorials on the FilledStacks Youtube channel.

    Flutter tutorials The repo contains the source code for all the written tutorials by Filledstacks. All Tutorials plus additional snippets and shorter

    Dane Mackier 4.5k Dec 31, 2022
    A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

    r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

    PengHui Li 112 Nov 11, 2022
    Flutter-GetX-Toturials - Getx full tutorials for flutter

    getx_full_tutorials A new Flutter getx tutorial. This Project Contains: Snackbar

    Inzimam Bhatti 2 Dec 1, 2022
    An Awesome list of all the Flutter video Tutorials from Whatsupcoders

    Whatsupcoders-flutter An Awesome list of all the Flutter video Tutorials from Whatsupcoders Channel Whatsupcoders offers you tons of free tutorials re

    Whatsupcoders 41 May 27, 2022
    A list of Flutter beginners and advanced tutorials :wink:

    Flutter Tutorials What is Flutter? Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. F

    Raunak Hajela 85 Nov 23, 2022
    All of my open source flutter and dart projects, tutorials are published here.

    Flutter In this repository I publish all of my open source flutter, dart projects, and tutorials. Written Tutorials Dart Programming Language for Prog

    Mahmud Ahsan 143 Jan 1, 2023
    ⚡️ This project uses the flutter UI tool kit to build an education/skill app for offering online tutorials.

    ⚡️ This project uses the flutter UI tool kit to build an education/skill app for offering online tutorials.

    Godson 8 Nov 10, 2022
    Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, tutorials, etc...

    MegaLinks Megalinks is an android app where we provide free resources available for video editing, like Scenepacks, project files of the big editor, t

    Vishal Rajesh Karangale 3 Jul 8, 2022
    A Sample Flutter project to show how to integrate native kotlin code with flutter

    kotlin_flashlight A Sample Flutter project to show how to integrate native kotlin code with flutter. Getting Started Visit this docs for Flutter setup

    null 0 Apr 4, 2022