Modern Flutter Welcome Screen UI – Flutter UI 2022

Flutter Login App, Flutter UI / UX, Flutter Widgets, UI UX

Flutter welcome screen UI | Flutter UI 2022 | Design app in flutter | Flutter app design

In this flutter tutorial, we will learn to design the Welcome Screen in flutter which is a part of our Flutter login app course. We will create a flutter-responsive UI or make our design responsive using the flutter column widget.

We will also learn, how to get flutter theme mode on any screen to change the theme with logic.

USEFUL LINKS

This is the tutorial of our Flutter Login App Series.

Complete Course

Watch Youtube tutorial

Subscribe us on Youtube

Download Onboarding Images

welcome_screen.dart

import 'package:flutter/material.dart';
import 'package:login_flutter_app/src/constants/sizes.dart';
import '../../../../constants/colors.dart';
import '../../../../constants/image_strings.dart';
import '../../../../constants/text_strings.dart';
class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    var height = mediaQuery.size.height;
    var brightness = mediaQuery.platformBrightness;
    final isDarkMode = brightness == Brightness.dark;
    return Scaffold(
      backgroundColor: isDarkMode ? tSecondaryColor : tPrimaryColor,
      body: Container(
        padding: const EdgeInsets.all(tDefaultSize),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image(image: const AssetImage(tWelcomeScreenImage), height: height * 0.6),
            Column(
              children: [
                Text(tWelcomeTitle, style: Theme.of(context).textTheme.headline3),
                Text(tWelcomeSubTitle,
                    style: Theme.of(context).textTheme.bodyText1,
                    textAlign: TextAlign.center),
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: OutlinedButton(
                    onPressed: () {},
                    child: Text(tLogin.toUpperCase()),
                  ),
                ),
                const SizedBox(width: 10.0),
                Expanded(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text(tSignup.toUpperCase()),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}