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

The Flutter Way
4 min readJan 28, 2024

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"…

--

--

The Flutter Way

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!