Flutter App Intro/Onboarding Screen with Carousel & Animated Dots — NO Package

You’re going to learn how to create an Onboarding page like shows below in your Flutter app.

Onboard Page Preview

As you can see the indicators are animated — it’s amazing that it only needs 10 lines of code!

Also created a video tutorial 🎬, Build Flutter App Intro/Onboarding Screen

Get started

Let’s start with OnboardingPage, which is a StatefulWidget. Also, define a variable named _selectedIndex and set its default value to 0.

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

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int _selctedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // TODO: Onboard Content

            // TODO: Animated Dots

            // TODO: Button
          ],
        ),
      ),
    );
  }
}

List<Map<String, dynamic>> demoData = [
  {
    "illustration": "assets/Illustrations/Illustrations_1.svg",
    "title": "All your favorites",
    "text":
        "Order from the best local restaurants \nwith easy, on-demand delivery.",
  },
  {
    "illustration"…