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