How to design App Walkthrough Screen in Flutter

Your app’s walkthrough should begin with a welcome screen. This is where you formally greet your users for the first time and welcome them to your app.

From a design perspective, the welcome screen is normally what’s known as a “dedicated UX pattern.” Since the welcome screen is playing a vital role in your Application walkthrough, the entire screen is dedicated to it, to avoid your user from getting distracted which means it should be in full screen.

In Flutter, we can create a responsive Walkthrough screen that will be adaptive for Web, Mobile and Tablet. Have provided the screenshots and coding for your reference.

walk_through_mobile.dart

import 'package:flutter/material.dart';
import 'package:my_new_project/ui/desktop/sign_in_desktop.dart';
import 'package:my_new_project/ui/mobile/sign_in_mobile.dart';
import 'package:my_new_project/utils/DAColors.dart';
import 'package:my_new_project/utils/String.dart';
import 'package:nb_utils/nb_utils.dart';

import '../../Responsive/responsive_layout.dart';
import '../../main.dart';

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

  @override
  State<WelcomeScreenMobile> createState() => _WelcomeScreenMobileState();
}

class _WelcomeScreenMobileState extends State<WelcomeScreenMobile> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            'assests/images/logo.png',
            fit: BoxFit.cover,
            height: screenHeight * 0.2,
            width: screenHeight * 0.2,
          ),
          Text(
            appName,
            textAlign: TextAlign.center,
            style: primaryTextStyle(size: 20, color: primaryColor),
          ),
          AppButton(
            text: 'Sign In',
            textStyle: boldTextStyle(color: white),
            width: context.width(),
            color: primaryColor,
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => ResponsiveLayout(
                            mobileBody: const SignInScreenMobile(),
                            desktopBody: SignInScreenDesktop(),
                          )));
            },
          ).paddingOnly(left: 16, right: 16, top: 25),
          Container(
            width: context.width(),
            margin: const EdgeInsets.all(20),
            padding:
                const EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 12),
            decoration: BoxDecoration(
              border: Border.all(color: primaryColor),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text('Do you already have an account?',
                style: boldTextStyle(color: primaryColor),
                textAlign: TextAlign.center),
          ).onTap(
            () {
              //finish(context);
            },
            highlightColor: context.cardColor,
            splashColor: context.cardColor,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Dark Mode'),
              Switch(
                value: appStore.isDarkModeOn,
                activeColor: primaryColor,
                onChanged: (s) {
                  appStore.toggleDarkMode(value: s);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

walk_through_desktop.dart

import 'package:flutter/material.dart';
import 'package:my_new_project/utils/DAColors.dart';
import 'package:my_new_project/utils/String.dart';
import 'package:nb_utils/nb_utils.dart';
import '../../Responsive/responsive_layout.dart';
import '../../main.dart';
import '../mobile/sign_in_mobile.dart';
import 'sign_in_desktop.dart';

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

  @override
  State<WelcomeScreenDesktop> createState() => _WelcomeScreenDesktopState();
}

class _WelcomeScreenDesktopState extends State<WelcomeScreenDesktop> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assests/images/logo.png',
                fit: BoxFit.cover,
                height: 200,
                width: 200,
              ),
              Text(
                appName,
                textAlign: TextAlign.center,
                style: primaryTextStyle(size: 20, color: primaryColor),
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AppButton(
                text: 'Sign In',
                textStyle: boldTextStyle(color: white),
                width: 280.0,
                color: primaryColor,
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => ResponsiveLayout(
                                mobileBody: SignInScreenMobile(),
                                desktopBody: SignInScreenDesktop(),
                              )));
                },
              ).paddingOnly(left: 16, right: 16, top: 25),
              Container(
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.only(
                    left: 16, right: 16, top: 12, bottom: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: primaryColor),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Text('Do you already have an account?',
                    style: boldTextStyle(color: primaryColor),
                    textAlign: TextAlign.center),
              ).onTap(
                () {
                  //finish  (context);
                },
                highlightColor: context.cardColor,
                splashColor: context.cardColor,
              ),
              Row(
                children: [
                  const Text('Enable Dark Mode'),
                  Switch(
                    value: appStore.isDarkModeOn,
                    activeColor: primaryColor,
                    onChanged: (s) {
                      appStore.toggleDarkMode(value: s);
                    },
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Also, the welcome screen can be designed as an embedded UX pattern, with the space around it greyed out.