User Interface Design - Part 2

Flutter provides tons of widgets that you can use to create beautiful UIs. Previous day, you learned to build simple UI with Container, Text, Rows and Columns. Today you will learn to build scrolling UIs with ListView and GridView.

Project - Quotes List

Given the list of quotes in JSON, build a UI using ListView to display the quotes. You can take inspiration for existing quotes applications in the Play Store or App Store.

By the end of this day, you should have a basic understanding of how to use widgets like SingleChildScrollView, ListView, and GridView to create custom layouts that scroll to reveal more content.

Tips

• SingleChildScrollView with Column can be used to create a vertical scrolling UI.
• ListView can be used instead of SingleChildScrollView to create a vertical scrolling UI without needing to use Column.
• Practice building more UIs with Flutter. You can find inspiration from existing apps in the Play Store or App Store. You can also check out the Flutter UI challenges GitHub repository for more ideas.

Resources

• SingleChildScrollView class
• ListView class
• Flutter UI challenges

Enjoying? Tell your friends.