How to create a walkthrough in Flutter app without any plugins?

The code is a Flutter application that displays a walkthrough screen. The application consists of two classes: WalkthroughScreen and MainScreen.

The WalkthroughScreen class creates a stateful widget that displays three images as pages that can be swiped through using a PageController. The widget also includes two buttons, one to skip to the next screen, and another to navigate to the next page or to the LoginForm screen. The current page index is stored in _currentPage and is updated whenever the user swipes to a new page.

The MainScreen class creates a stateless widget that displays a simple white screen with the text "Main Screen" in the center.

In the code, WalkthroughScreen is the default screen that will be displayed when the app is run. If the user clicks the "Next" button on the last page of the walkthrough screen, the app will navigate to the LoginForm screen, which is defined in the login_screen.dart file. If the user clicks the "Skip" button, the app will navigate to the MainScreen.

import 'package:flutter/material.dart';

import 'login_screen.dart';

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

  @override
  _WalkthroughScreenState createState() => _WalkthroughScreenState();
}

class _WalkthroughScreenState extends State<WalkthroughScreen> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            children: [
              Container(
                height: MediaQuery.of(context).size.height * 0.8,
                width: MediaQuery.of(context).size.width * 0.8,
                child: Image.network(
                  'https://img.freepik.com/free-vector/couple-walking-together-concept-illustration_114360-13910.jpg?w=1380&t=st=1675573066~exp=1675573666~hmac=321f43a11929ffa51acca0dfd9560181fbc53dc97d6a0f4448a298ebe9f05e00',
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.8,
                width: MediaQuery.of(context).size.width * 0.8,
                child: Image.network(
                  'https://img.freepik.com/free-vector/counting-stars-concept-illustration_114360-4729.jpg?w=1380&t=st=1675573086~exp=1675573686~hmac=c8a36e6bc2619304a36b9c84a99f0cc273f0df2b3d11e32bd7b4565e38c27b05',
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                height: MediaQuery.of(context).size.height * 0.8,
                width: MediaQuery.of(context).size.width * 0.8,
                child: Image.network(
                  'https://img.freepik.com/free-vector/bride-groom-getting-married_52683-32275.jpg?w=1380&t=st=1675573111~exp=1675573711~hmac=ea91c8c997b0c42604f4600ffd7093d1c5dcf8104576098c23878116e24f3f10',
                  fit: BoxFit.cover,
                ),
              ),
            ],
            onPageChanged: (int index) {
              setState(() {
                _currentPage = index;
              });
            },
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => LoginForm(),
                        ),
                      );
                    },
                    child: const Text('Skip'),
                  ),
                  const SizedBox(
                    width: 16.0,
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_currentPage < 2) {
                        _pageController.nextPage(
                          duration: const Duration(milliseconds: 500),
                          curve: Curves.easeInOut,
                        );
                      } else {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => LoginForm(),
                          ),
                        );
                      }
                    },
                    child: const Text('Next'),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

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