Modern Flutter Welcome Screen UI – Flutter UI 2022

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

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.

    Watch Youtube tutorial

     

    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()),
    ),
    ),
    ],
    )
    ],
    ),
    ),
    );
    }
    }

    CODING with T

    🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

    23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

    Source code

    COURSES

    Flutter E Commerce App Modern and latest
    Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
    Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

    Learn Flutter

    1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
    2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

    flutter Design

    How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
    How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
    16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
    Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
    23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

    Flutter Backend

    33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
    38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
    40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
    Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
    This is default text for notification bar