Coding with T
  • Home
  • Flutter
    • Flutter Login App
    • Flutter Crash Course
  • Android
    • Products
      • Get A Way
      • Bull’s Rent
    • Basics
    • UI UX
    • Android for Beginners
  • Store
  • Support
  • Contact
Select Page

Modern Flutter Welcome Screen UI – Flutter UI 2022

by taimoor | Sep 9, 2022 | Flutter, Flutter Login App, Flutter UI / UX, Flutter Widgets, UI UX | 0 comments

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

    • Install Android Studio
    • Install Flutter
    • Create a new flutter app
    • Create Folder Structure
    • Setup Theme in Flutter for Light & Dark Mode

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

    Related

    Submit a Comment Cancel reply

    Your email address will not be published. Required fields are marked *

    Subscribe

    Recent Posts

    • Overview of Flutter E-commerce App
    • Flutter Login- Flutter Profile Page UI Design – Flutter App Design [2023]
    • Flutter firebase phone authentication with example tutorial 2022
    • Flutter Firebase Authentication Tutorial 2022 using GETX
    • How to setup firebase in flutter – Firebase Setup 2022

    Products

    • Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023 Quick Start Flutter Login App
      Rated 5.00 out of 5
      $5.00 – $14.99
    • Login App UI Source Code PRODUCT Thumbnail Latest Login Flutter App UI - Login Flutter App Source Code
      Rated 5.00 out of 5
      $15.00 $9.99
    • Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage Flutter Dashboard Source Code - Flutter UI
      Rated 5.00 out of 5
      $10.00 $5.00
    • complete login android app in android studio 2020 or city guide android app source code by Taimoor sikander - thumbnail Login App for any Android Application
      Rated 5.00 out of 5
      $30.00 $15.00

    Categories

    android android design android progress bar android studio android studio basic setup android studio tutorials android toutorial for beginners android tutorial for beginners authentication city guide City Guide App City guide dashboard dark theme E-commerce app using Flutter and Firebase firebase firebase authentication flutter flutter basics Flutter E-commerce App Flutter e-commerce app source code Flutter e-commerce app tutorial flutter icons flutter overview Flutter shopping app UI kit flutter ui forget password forget password design form form validation Getx icon image install android studio install flutter learn basics network Organize flutter code OTP phone authentication progress bar setup setup android studio Splash screen store data in firebase textfield

    Flutter App development - Coding with T - App Store

    Coding with T

    Expert App Development, Design, YouTube Tutorials, and a Cutting-Edge App Marketplace, All in One Destination!

    Contact Us

    Categories

    • Basics
    • UI/UX
    • Material Design
    • Android Firebase
    • Flutter Firebase
    • Flutter Widgets
    • Flutter UI/UX

    Courses

    • Flutter Crash Course
    • Flutter Login App

    Products

    • Bull’s Rent Android Studio Project
    • Flutter Login App UI
    • Flutter Dashboard Design Source Code
    • Android Login App for any Android Application
    • Flutter Login App

    Designed and Developed by Coding with T | Copyright 2023

    • Follow
    • Follow
    • Follow