Skip to main content ppwriters


Day 12

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.


  • 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.


Enjoying? Tell your friends.


Learn the basics of Flutter and Dart in 30 days! We provide a roadmap, resources, and project ideas to help you along your journey.

back to 30 Days to Master Flutter

Join our community on Discord to connect with fellow learners, share your progress, and get help with any questions you may have throughout the #30DaysMasterFlutter challenge. Join now and get started on your journey to mastering Dart and Flutter!

join now