Introduction Screens

by Jimmy Huynh


Posted on July 30, 2019 at 6:00 PM



Simple Design and implementation

GitHub Repository

Using Material Design I developed a simple intro screen using flutter

Installation and Setup

Starting A New Project

Step 1: Clone the Github Repository to your computer

Step 2: Open the project in Visual Studio and run debug

Adding To An Existing Project

Step 1: Clone the Github Repository to your computer

Step 2: Copy the main.dart,intro.dart, intro folder, assets into your project. In your pubspec.yaml include "dots_indicator: ^0.0.5" into your dependency and add a path "assets/images/" into your assets

How the Code Works
Files
  • assets <- Contains the images
  • main.dart <- Returns widget from intro.dart
  • intro.dart <- Controls which screen is being shown and navigation
  • intro <- Contains the screen Templates
    • first.dart
    • second.dart
    • third.dart
    • forth.dart
main.dart

The 'main.dart' file containts a MaterialApp that returns StartIntro() Widget located in 'intro.dart' also sets some theme colors.

intro.dart

The StartIntro() Widget contains a TabBarView that has the references the screens located in the "intro" folder named first.dart, second.dart, third.dart... and so on. There is a controller which keeps track of which screen you are on called '_controller' and that value is used for the dots indicator along with determining the last screen which will change the bottom arrow of the nav bar to a check mark.

There are if statements to check if you push the skip button and or if you reach the end of the screen and push the check mark button which you can replace it's null value with the widget you want to show.

first.dart

Contains the template design.

assets

Place images you want to show here and reference them in your code.


Frameworks and Projects