-yellow.svg){kind=icon}
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!
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.
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.
Here are the links for the articles:
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.dartFlutter 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.
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:
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
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.
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
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.
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
Flutter Navigator 2.0 for Authentication and Bootstrapping — Part 5: Web
In the fourth sample, we focus on two things:
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
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:
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.
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
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.
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
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:
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.
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
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:
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
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:
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
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
👤 Cagatay Ulusoy
- Twitter: @ulusoyapps
- Github: @ulusoyca
- LinkedIn: @https://www.linkedin.com/in/cagatayulusoy/
Give a ⭐️ if this project helped you!
Copyright © 2020 Cagatay Ulusoy.
This project is
Apache License, Version 2.0 (the "License")
licensed.
This README was generated with ❤️ by readme-md-generator