Getting started with basic widgets in Flutter
Michał RomanFlutter is an open-source framework created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. If you're just starting out with Flutter, understanding its fundamental widgets is crucial. In this article, we'll dive into some of the basic widgets such as Text, Container, Row, and Column. We'll also explore how to build layouts using these widgets and how to style them to create a visually appealing mobile applications.
Basic widgets in Flutter
Text widget
The Text widget is used to display a string of text with single style. It's one of the simplest and most commonly used widgets in Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Basic widgets'),
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
),
),
);
}
}
Container widget
The Container widget is used to contain and style other widgets. It can have padding, margins, borders, and a background color.
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(8.0),
color: Colors.lightBlue,
),
child: Text(
'This is a container',
style: TextStyle(fontSize: 18, color: Colors.white),
),
)
Row and column widgets
The Row and Column widgets are used for creating flexible layouts in a horizontal and vertical direction, respectively.
Row example
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
Column example
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)
Building layouts in Flutter
Building layouts in Flutter involves nesting widgets inside each other. Let’s create a simple layout for a mobile application that includes a header, a main content area with some text and images, and a footer.
Example: Simple mobile layout
Here's an example of how to create a basic mobile layout using Column, Row, Container, and Text widgets.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Layout example'),
),
body: Column(
children: <Widget>[
// Header
Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text(
'Header',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
// Main Content
Expanded(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Main content area',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
color: Colors.green,
padding: EdgeInsets.all(16.0),
child: Text(
'Item 1',
style: TextStyle(color: Colors.white),
),
),
Container(
color: Colors.red,
padding: EdgeInsets.all(16.0),
child: Text(
'Item 2',
style: TextStyle(color: Colors.white),
),
),
],
),
],
),
),
),
// Footer
Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text(
'Footer',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
],
),
),
);
}
}
Styling elements in Flutter
Styling in Flutter is done through properties provided by each widget. You can set colors, padding, margins, borders, text styles, and more.
Text styling
The Text widget can be styled using the style property, which accepts a TextStyle object.
Text(
'Styled Text',
style: TextStyle(
fontSize: 30,
color: Colors.purple,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
)
Container styling
The Container widget can be styled using various properties such as padding, margin, decoration, and more.
Container(
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(color: Colors.black, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text(
'Styled Container',
style: TextStyle(color: Colors.white, fontSize: 16),
),
)
Useful tools for Flutter development
Developing applications in Flutter can be made easier and more efficient with the help of several tools designed to enhance the development process and simplify building layouts. Here are some tools and resources that can be particularly helpful:
Flutter DevTools
Flutter DevTools is a suite of performance and debugging tools for Flutter and Dart applications. It includes a widget inspector, a timeline view, a memory profiler, and more. These tools are essential for debugging and optimizing your Flutter applications.
DartPad
DartPad is an online code editor that lets you play with the Dart language and Flutter framework in your browser. It's a great tool for experimenting with Flutter code and sharing snippets with others.
pub.dev
pub.dev is the official package repository for Dart and Flutter. It hosts thousands of packages that can be used to extend the functionality of your Flutter apps. Whether you need to integrate with an API, use custom UI components, or add utilities, pub.dev has a package for you.
FlutterFlow
FlutterFlow is a visual application builder for Flutter. It allows you to design your UI visually and generates the Flutter code for you. This can be particularly useful for quickly prototyping and building complex UIs without writing code from scratch.
Panache
Panache is a Flutter material theme editor. It allows you to create custom themes for your Flutter apps using a simple web interface. You can adjust colors, typography, and other theme properties, and then download the generated theme code.
Summary
By utilizing these tools and resources, you can streamline your Flutter development workflow, make debugging and optimization easier, and quickly create beautiful, functional layouts. Experiment with different tools to find the ones that best suit your development style and needs.
Subscribe to my newsletter
Read articles from Michał Roman directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by