How to develop live intro pages with flutter

How to quickly build live intro pages in flutter.

Live intro pages are a great way to start your application. They can be used to show the user a quick navigation through the mobile application or to simply show what the application is all about.

Here is a quick navigation through a sample introduction to a mobile applicaton.

You can also download the zipped file here to follow along.

We are mainly taking advantage of the page view widget to make these pages swipable.

import 'package:flutter/material.dart';

import 'intro_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Live intros',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: IntroPage(),
    );
  }
}

 

The main.dart manly links to IntroPage() Class in the intro_page.dart file which is used to initiate the PageView Widget for collecting together the intro classes.

 

intro_page.dart

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

import 'home_page.dart';
import 'intro_screens/intro_page1.dart';
import 'intro_screens/intro_page2.dart';
import 'intro_screens/intro_page3.dart';

class IntroPage extends StatefulWidget {
  const IntroPage({super.key});

  @override
  State<IntroPage> createState() => _IntroPageState();
}

class _IntroPageState extends State<IntroPage> {
  //Controller to keep track of the page we are on.
  PageController _controller = PageController();

  //Track whether on the last page or not.
  bool onLastPage = false;
  @override
  Widget build(BuildContext context) {

We also declare a controller for the pageview to track the page that the view is showing on the mobile application.

The Children of the page view are IntroPage1(), IntroPage2(), IntroPage3() which are classes to their respective dart files stored in the intro_screens folder under lib.

 

intro_page1.dart.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class IntroPage1 extends StatelessWidget {
  const IntroPage1({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.pink,
      child: ListView(
        children: [
          Lottie.asset(
            'assets/heart1.json',
            height: 300,
            width: 300,
            fit: BoxFit.fill,
          ),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text(
              'Medical Assistant',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

 

The Main component of these files are the lottie files that provide life to these screens

Note: Make sure in your pubspec.yaml, you added the smoothdotindicator library and lottiefiles library.

Then download the lottie files of your intrest in their json format and store them in the assets folder at the root of your application. Then activate the assets from pubspec.yaml file and add the links.

 

intro_page2.dart

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class IntroPage2 extends StatelessWidget {
  const IntroPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.purple[400],
      child: ListView(
        children: [
          Lottie.asset(
            'assets/doctor3.json',
            height: 300,
            width: 300,
            fit: BoxFit.contain,
          ),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text(
              'We are a click away',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

 

intro_page3.dart

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class IntroPage3 extends StatelessWidget {
  const IntroPage3({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[300],
      child: ListView(
        children: [
          Lottie.asset(
            'assets/pregnant2.json',
            height: 300,
            width: 300,
            fit: BoxFit.contain,
          ),
          SizedBox(
            height: 20,
          ),
          Center(
            child: Text(
              'Immediate attention to pregnancy.',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
                color: Colors.black,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

So if you click the done button in the intro_page.dart file, then it takes you to a blank home_page.dart file.

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.amberAccent,
        child: Center(child: Text('Great')),
      ),
    );
  }
}

In Case you are lost along the way, download the source code here.  

or Download it at the begining of the tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *