Introduction:
Welcome back to our Flutter series!
In this second blog post, we will dive deeper into designing
captivating user interfaces using Flutter’s powerful widget
hierarchy.
Now that you understand the basics of Flutter widgets, it’s
time to unleash your creativity and build stunning UIs for
your mobile applications.
Let’s explore the key concepts and techniques for crafting
visually appealing user interfaces!
Understanding the Widget Tree:
In Flutter, the user interface is represented as a tree of
widgets, commonly known as the widget tree.
Each widget in the tree corresponds to a specific UI
component, and the arrangement of these widgets defines
the layout and appearance of the app.
By understanding the widget tree, you can efficiently
organize your UI components and create a seamless user
experience.
Creating a Simple UI:
Let’s start by creating a simple Flutter app with a basic
user interface.
We’ll build a login screen that consists of two text fields
for email and password, along with a login button.
Here’s an example of how to structure the widget tree for
this UI:
import 'package:flutter/material.dart';
class LoginScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Login')),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextField(
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
fillColor: Colors.grey[200],
filled: true,
),
),
SizedBox(height: 16),
TextField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
fillColor: Colors.grey[200],
filled: true,
),
),
SizedBox(height: 24),
ElevatedButton(
onPressed: () {},
child: Text('Login'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.symmetric(vertical: 16),
),
),
],
),
),
);
}
}
Customizing UI Components:
Flutter offers a wide range of widgets with customizable
properties that allow you to achieve your desired UI
design.
You can change colors, font sizes, shapes, and more to
match your app’s branding and style.
Experiment with different widget properties and see how
they impact the appearance of your UI.
Here are three examples of customizing UI components:
Changing Colors:
You can customize the fill colors of UI TextField Widget
component using the fillColor property as shown below
TextField(
decoration: InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
fillColor: Colors.grey[200], // Set the background color
filled: true, // Make sure to set 'filled' to true
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
fillColor: Colors.grey[200], // Set the background color
filled: true, // Make sure to set 'filled' to true
),
),
Adjusting Font Size:
You can change the font size of Text Widget using
the style property as shown below
ElevatedButton(
onPressed: () {},
child: Text(
'Login',
style: TextStyle(fontSize: 18), // Set the font size
),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
),
),
Customizing Shapes:
Flutter allows you to define custom shapes for widgets
using the shape property as shown below
ElevatedButton(
onPressed: () {},
child: Text('Login'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(24), // Customize the corner radius
),
padding: EdgeInsets.symmetric(vertical: 16),
),
),
Design Inspiration from Dribbble, Pinterest, and
More:
To become better at using Flutter to design UIs, draw
inspiration from popular design platforms like Dribbble
and Pinterest.
Browse through various app designs and study their
layouts, color schemes, and interactions. Use these designs
as references to enhance your UI skills and create unique
and polished user interfaces.
Conclusion:
Congratulations on gaining insights into designing user
interfaces with Flutter’s widget hierarchy!
You’ve learned how to structure the widget tree to create
dynamic UIs and customize widget properties to match
your app’s branding.
As you continue your Flutter journey, remember to
practice designing UIs from platforms like Dribbble and
Pinterest to hone your skills.
