Using GridView, Tabs, and Steppers in Dart's Flutter Framework

What Will I Learn?

• You will learn how to make a Grid View in Flutter
• You will learn how to use Tabs in Flutter for Navigation and Routing
• You will learn how to use Steppers to create Flow in your User Interfaces

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

• Intermediate

Description

In this Dart Flutter tutorial, we look at three very common User Interface Widgets from the Flutter Framework: GridViews, Tabs and Steppers. GridViews are like ListViews but they give us the ability to have more then one column or row. In this way, we can create large grids filled with User interface items which allow the user to Scroll Around and Access Features in our Application. Tabs are a bit like the routing system that we looked at before, except they are better integrated into the user interface in a more seamless way. Steppers are Widgets that let use create actions that require a flow of action from the User whether it be registration forms or something else entirely.

Each of these elements works like any other widget in flutter; it can be placed anywhere in our application and it fits in the widget tree. The GridView does not have state by default but the Tabs and Steppers do have state. Our Tabs also require a TabController which determines which view should be displayed based on the context of the application.

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---