Flutter UI Workshop

This workshop repository aims at showing you simple examples of handling responsive and adaptive UIs in Flutter. It consists of 4 screens with different component layouts. It also has a bottom navigation bar (for mobile) and a navigation rail (for tablet) that switches to an extended version on wide screens.

Git Branches

• main: The main branch contains the complete code for the workshop.
• point-1: The start branch that contains the initial code for the UIs without any responsiveness or adaptiveness.
• point-2: The branch that contains the code after making in-app content adaptive.
• point-3: Same as main branch. Completed code with responsiveness and adaptiveness for navigation.

You are currently viewing the main branch.

Get Started

Point 1 - Initial Code

1. Clone the repository:

git clone https://github.com/keepdeploying/flutter_ui_workshop.git

2. Navigate to the project directory:

cd flutter_ui_workshop

3. Install the dependencies:

flutter pub get

4. Checkout to Point 1 branch to start the workshop:

git checkout point-1

5. Run the app against mobile or web. Either use your IDE's run option or run the following command in terminal:

flutter run

6. Explore the code and the rendered UI both in small and wide screens. Notice how:

i. The Floating Action Button (FAB) always opens a small normal popup dialog. ii. The Feed Screen posts cards fill up the entire width of the screen (unconstrained). iii. The Dashboard Screen has vertical scrolling cards that fill up the entire width of the screen (unconstrained). iv. The Chat Screen on wide screens have the chat list and chat messages unconstrained and stretched out. v. The Settings Screen is also unconstrained on wide screens. vi. The navigation is always a bottom navigation bar.

Point 2 - Adaptive In-App Content

1. Kill the running app (if any). Ctrl + C in terminal or Stop Icon in your IDE.

2. Checkout to Point 2 branch:

git checkout point-2

3. Run the app against mobile or web. Either use your IDE's run option or run the following command in terminal:

flutter run

4. Explore the code differences

5. Check the rendered UI both in small and wide screens. Notice how:

i. The Floating Action Button (FAB) opens a full screen dialog on small screens and a normal popup dialog on wide screens. ii. The Feed Screen posts cards are constrained to a max width on wide screens and centered. iii. The Dashboard Screen uses a grid layout on wide screens for its cards. iv. The Chat Screen on wide screens have the chat list and chat messages placed side by side. v. The Settings Screen is also constrained to a max width on wide screens and kept to the left side. vi. The navigation is still a bottom navigation bar though (we will handle it in Point 3).

Point 3 - Responsive Navigation

1. Kill the running app (if any). Ctrl + C in terminal or Stop Icon in your IDE.

2. Checkout to Point 3 branch:

git checkout point-3

3. Run the app against mobile or web. Either use your IDE's run option or run the following command in terminal:

flutter run

4. Explore the code differences

5. Check the rendered UI both in small and wide screens. Notice how:

i. We now have a navigation rail on tablet screens that switches to an extended navigation rail on wide screens. ii. The Bottom Navigation Bar is now only visible on mobile screens. iii. The Floating Action Button has moved from the bottom right position of the app when on tablet and wide screens to the leading widget of the navigation rail. iv. The Floating Action Button (FAB) in the Rail opens a popup dialog on tablet and wide screens.

Google Slides

The Slides Presentation for this workshop is at https://docs.google.com/presentation/d/1jpdUZe959Uw23WFsKG0lsFGlMmoowj3vtl3UMZuUaKs/edit?usp=sharing

Outro

Congrats on completing this workshop! Please build good UIs.

Thanks!