Flutter most used widgets

Flutter has a rich library of layout widgets. In this lesson we cover the most used. We also experiment with a reusable ‘Hotel’ component. The data can be passed to the ‘constructor’ of the widget and the ‘main’ code repeat this custom component.

What we cover:

Standard widgets

• Text()
• SafeArea()
• Row()
• Column()
• SizedBox()
• Divider()
• Buttons()
• Scaffold()
• Expanded()
• Flexible()
• InkWell()
• Image()
• ExpansionTile()

Creating a custom reusable widget.

Mid term project requirements.

---

Text Widget

The Text widget is used to display a single line or multiple lines of text in a Flutter app. It allows you to style the text with various attributes such as font size, color, weight, line height and more. The value of height is a multiplier relative to the font size. For example, a height value of 1.5 means the line height will be 1.5 times the font size.

Text(
'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    height: 1.5, // Adjust the multiplier as needed
    color: Colors.blue,
  ),
)

Safe area of mobile screen

The SafeArea widget in Flutter is used to ensure that its child widgets are positioned within the safe area boundaries of the screen. It is particularly useful to avoid overlapping with system UI elements like notches, status bars, and navigation bars on various devices.

SafeArea(
   child: 
)

Row and Column widgets

Row and Column are used to arrange widgets horizontally and vertically, respectively. They can also be nested within each other to create complex layouts.

Row(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: [
      Icon(Icons.account_circle),
      Text('Username'),
   ],
)

Column(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [
      Text('Hello,'),
      Text('Flutter!'),
   ],
)

SizedBox widget

The SizedBox widget allows you to create a box of a fixed size, which can be useful for adding spacing between widgets.

SizedBox(
   width: 100,
   height: 50,
   child: Text('Fixed Size Box'),
)

Divider widget

The Divider widget creates a horizontal line to separate content.

Column(
   children: [
      Text('Item 1'),
      Divider(),
      Text('Item 2'),
      Divider(),
      Text('Item 3'),
   ],
)

Button widget

There are different types of buttons with varying visual styles. These button widgets are pre-styled for you, making it easy to create clickable elements in your UI.

• TextButton is a simple button with text. It is typically used for less prominent actions.
• ElevatedButton is a raised button with a filled background. It is commonly used for primary actions in an app.
• OutlinedButton is an outlined button with no fill. It is often used for secondary actions or to reduce visual prominence.

TextButton(
   onPressed: () {
      // Handle button press
   },
   child: Text('Text Button'),
)

ElevatedButton(
   onPressed: () {
      // Handle button press
   },
   child: Text('Elevated Button'),
)

OutlinedButton(
   onPressed: () {
      // Handle button press
   },
   child: Text('Outlined Button'),
)

Scaffold widget

Scaffold class is a basic skeletal structure that provides a layout structure for the visual interface of an app. It serves as a top-level container for the primary elements that make up a typical app screen, such as an app bar, body content, floating action button, and bottom navigation bar.

Main components:

• appBar
• body
• floatingActionButton
• bottomNavigationBar
• drawer

Expanded widget

The Expanded widget is often used inside Row or Column to distribute available space among its children.

Row(
   children: [
      Expanded(child: Container(color: Colors.red)),
      Expanded(child: Container(color: Colors.green)),
      Expanded(child: Container(color: Colors.blue)),
   ],
)

Flexible widget

The Flexible widget is similar to Expanded, but it allows the child widget to occupy only a portion of the available space. You can set the flex property to control how much space each Flexible widget should take compared to others.

Row(
   children: [
      Flexible(
         flex: 2,
         child: Container(
            color: Colors.red,
            height: 100,
         ),
      ),
      Flexible(
         flex: 1,
         child: Container(
            color: Colors.green,
            height: 100,
         ),
      ),
      Flexible(
         flex: 1,
         child: Container(
            color: Colors.blue,
            height: 100,
         ),
      ),
   ],
)

InkWell widget

The InkWell widget is used to create a rectangular area that responds to taps with a ripple animation. It is commonly used for creating interactive buttons.

InkWell(
   onTap: () {
   // Handle tap event
   },
   child: Container(
      padding: EdgeInsets.all(12),
      child: Text('Click me', style: TextStyle(fontSize: 16)),
   ),
)

Image widget

The Image widget displays an image from various sources like assets, the internet, or memory. You can control the image’s size, alignment, and other properties.

Image.network('https://example.com/image.jpg')
Image.asset('assets/image.png')
Image.memory(Uint8List.fromList(imageBytes))

ExpansionTile widget

The ExpansionTile widget creates a collapsible tile that expands to reveal more content when tapped.

ExpansionTile(
   title: Text('Expandable Tile'),
   children: [
      ListTile(title: Text('Option 1')),
      ListTile(title: Text('Option 2')),
   ],
)

 

 

All lessons >