Flutter introduction screens

Creating Flutter introduction screens: A Complete Guide

Introduction screens, also known as onboarding screens, play a crucial role in enhancing user experience by showcasing the app’s key features and setting the tone for interaction. In this blog, we’ll explore how to create visually appealing and functional introduction screens in Flutter using the provided code.

What Are Introduction Screens?

Introduction screens help users understand an app’s purpose and guide them through its core functionalities. They often consist of multiple pages displaying images, text, and interactive controls like “Next” or “Skip” buttons.

Prerequisites

To follow along with this tutorial, you need:

A working Flutter development environment.
Basic knowledge of Flutter widgets and Dart programming.

Project Setup

Install Dependencies
Add the smooth_page_indicator package to your pubspec.yaml to create smooth page transitions.

dependencies:
  flutter:
    sdk: flutter
  smooth_page_indicator: ^0.2.0

2. Assets Setup
Ensure your assets folder contains the images img_1.jpg, img_2.jpg, img_3.jpg, and img_4.jpg. Update the pubspec.yaml to include these assets:

flutter:
  assets:
    - assets/img_1.jpg
    - assets/img_2.jpg
    - assets/img_3.jpg
    - assets/img_4.jpg

Code Breakdown

1. Main Entry Point

The main function launches the app using MyApp.

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: IntroductionScreen(),
    );
  }
}

2. Introduction Screen Logic

We use PageView for swiping through the introduction pages and PageController to control navigation.

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

  @override
  State<IntroductionScreen> createState() => _IntroductionScreenState();
}

class _IntroductionScreenState extends State<IntroductionScreen> {
  final PageController _pageController = PageController();
  int _currentIndex = 0;

  final List<Widget> _pages = [
    IntroComponent(title: "Welcome", description: "Discover the app...", imagePath: "assets/img_1.jpg"),
    IntroComponent(title: "Explore", description: "Explore amazing features...", imagePath: "assets/img_2.jpg"),
    IntroComponent(title: "Stay Connected", description: "Keep in touch...", imagePath: "assets/img_3.jpg"),
    IntroComponent(title: "Get Started", description: "Let's dive into the app!", imagePath: "assets/img_4.jpg"),
  ];

3. Navigation Controls

Buttons for navigating between pages or skipping to the end.

void _skip() {
    _pageController.animateToPage(_pages.length - 1, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
  }

  void _onNext() {
    if (_currentIndex < _pages.length - 1) {
      _pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
    } else {
      _onFinish();
    }
  }

  void _onFinish() {
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Scaffold(body: Center(child: Text("Home Screen", style: TextStyle(fontSize: 25))))));
  }

4. Page Indicator with Smooth Transitions

We use SmoothPageIndicator for a sleek transition effect.

Positioned(
    left: 0,
    right: 0,
    bottom: 40,
    child: Center(
      child: SmoothPageIndicator(
        controller: _pageController,
        count: _pages.length,
        effect: WormEffect(dotHeight: 12, dotWidth: 12, dotColor: Colors.grey, activeDotColor: Colors.blue),
      ),
    ),
  )

5. Reusable IntroComponent Widget

Each page’s content is defined by IntroComponent.

class IntroComponent extends StatelessWidget {
  final String title;
  final String description;
  final String imagePath;

  const IntroComponent({super.key, required this.title, required this.description, required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(imagePath, height: 350),
        SizedBox(height: 30),
        Text(title, style: TextStyle(fontSize: 34, fontWeight: FontWeight.bold)),
        SizedBox(height: 20),
        Padding(padding: EdgeInsets.symmetric(horizontal: 20), child: Text(description, textAlign: TextAlign.center, style: TextStyle(fontSize: 20, color: Colors.grey[700])))
      ],
    );
  }
}

Conclusion

This tutorial demonstrates how to build interactive and visually appealing introduction screens using Flutter. With the PageView, SmoothPageIndicator, and custom components, you can create a seamless onboarding experience for your users.

Explore Other Flutter Topics…

Tagged Flutter introduction screens, Flutter Onboarding Screens, Flutter onboarding tutorial, Flutter Onboarding UI Design, Flutter Page Controller Tutorial, Flutter PageView Example, SmoothPageIndicator Flutter