How to Create Responsive UIs In Flutter
Here I am with another knowledge-sharing discussion in Flutter. I will share how to create responsive user interfaces using basic widgets in Flutter. This is very important for beginners because these are the best practices in Software development. So you must follow these best practices in Flutter. Flutter is a UI toolkit that provides cross-platform support with Dart programming language. When we implement UIs, They should be responsive on all devices. So How can you achieve this? There have a lot of facts. Here I discuss some of them using an implemented UI of a login screen.
You can see the initial code of the main.dart file. I change it as follows. First, you must start a new project using VS code or android studio. In main.dart file, you need to navigate the view into the login screen.
import 'package:flutter/material.dart';
import 'package:responsive_ui/screens/login_screen/login_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:LoginScreen(),
);
}
}In Flutter, there are two types of widgets. Stateful widgets and stateless widgets. If you want to change the state of your screen on run time, We can use stateful widgets. For example, On your screen, you want to display animations when tapping the plus button. Then a screen will display the incremented number. The screen will update with new data. This process is called the change of the state. We need a stateful widget responsible for managing states on run time with a set state method. If you don’t want to change anything on your screen, you want to create a static screen, or you want to display some content on your screen, you can use the stateless widget. If you want to change the state in the stateless widget, you can do it manually by refreshing or rebuilding the UI.
Now is the time to create a new file called login_screen.dart. We need to make it a stateful widget class. For that, you can use the short form stf + Enter. Then it will suggest a stateful widget for you. Here need to change the class name to LoginScreen. In this widget, we return a scaffold. Scaffold means your whole screen. I will create this screen with two types of widgets: single-child widgets and multi-child widgets. The difference between these two types of widgets is that multi-child widgets use multiple children, and single-child widgets can only take single children. In the following example, it uses multiple widgets. First, we need a column. Then we need a first widget as an image widget. The second widget would be a form widget. In the form widget, it used another multi-child widget. So here is the login page we are going to design.
Our target is to make screens responsive to all devices. For that, we can be given height, width and other sizes using MediaQuery. MediaQuery will manage the height and width of the widgets according to different device screen percentages.
Here is the sample code.
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<LoginScreen> createState() => _LoginScreen();
}
class _LoginScreen extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
elevation: 0,
actions: [
IconButton(icon: Icon(Icons.search), onPressed: () {}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
],
centerTitle: true,
title: Text("Login Screen"),
),
body: SingleChildScrollView(
child: Container(
height: height,
child: Column(
children: [
SizedBox(
width: width,
height: height * 0.3,
child: Image(
fit: BoxFit.cover,
image: NetworkImage(
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"))),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Expanded(
child: Form(
child: Column(
children: [
SizedBox(height: 28),
Align(
alignment: Alignment.centerLeft,
child: Text('Proceed with login'),
),
SizedBox(
height: 20,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.person),
hintText: 'Enter your email',
label: Text("Login"),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2))),
),
SizedBox(
height: 10,
),
TextFormField(
decoration: InputDecoration(
suffixIcon: Icon(Icons.remove_red_eye_outlined),
hintText: 'Enter your password',
label: Text("password"),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue, width: 2))),
),
SizedBox(height: 40),
Container(
height: 50,
width: width*0.9,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
"login",
style: TextStyle(color: Colors.white),
),
)),
SizedBox(
height: 20,
),
Text("Forget Password? Reset")
],
),
)),
)
],
),
),
),
);
}
}When you click on your text field, you will see the overflow error above your keyboard. To remove that overflow error, we can wrap up the body using a single child scroll view to scroll up the keyboard.
As a beginner of Flutter, From this article, I hope you learn how to use basic widgets and how to make our screens responsive to all devices. Thanks for reading.
Found this post useful? Kindly tap the 👏 button below! :)
