Modern Flutter Welcome Screen UI – Flutter UI 2022

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

    Let's Connect

    Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

    Download Project

    Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
    Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

    Latest Courses

    Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
    Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

    Latest Tutorials

    Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
    Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
    Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
    How to setup firebase in flutter 2022 - Flutter firebase setup
    Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

    Join Our Mailing List

    Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

    You have Successfully Subscribed!

    FLUTTER APP

    Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

    You can watch it on YouTube or read and get source code from Blog Post.

    You have Successfully Subscribed!