Day 3: Getting to Know Basic Widgets in Flutter

Sun, May 2025 19:15:01

Hi friends! Welcome back to the Flutter learning series with me. On this third day, we’re going to discuss basic widgets that are frequently used when coding in Flutter. This is super important for those of you who are just starting out, because understanding these basic widgets will be your foundation for building more complex UIs in the future.

The widgets we’re going to learn today are:

• Text
• Container
• Row
• Column
• Image
• Icon

After that, we’ll also experiment by creating a simple layout using combinations of those widgets. Let’s jump right in!

1. Text Widget

The Text widget is used to display text. It’s one of the simplest widgets, but also one of the most frequently used.

Text(
  'Hello, world!',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

Explanation:

• fontSize: font size
• color: text color
• fontWeight: text thickness

We can customize the text as needed with other properties like fontStyle, letterSpacing, and so on.

2. Container Widget

The Container widget can be thought of as a "multi-purpose box." We can add padding, margin, background color, borders, and more.

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.only(top: 20),
  color: Colors.amber,
  child: Text('This is inside a Container'),
)

The container can also be used to give specific width and height:

Container(
  width: 200,
  height: 100,
  color: Colors.green,
)

3. Row Widget

The Row widget is used to display child widgets horizontally (side by side from left to right).

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 10),
    Text('Star'),
  ],
)

We can set the alignment using mainAxisAlignment and crossAxisAlignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

4. Column Widget

Just like Row, but the Column widget arranges its children vertically.

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

Alignment settings are similar:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

5. Image Widget

Flutter supports images from various sources: local assets, network (internet), and files.

From the internet

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

From local assets

Make sure your image is placed in the assets/ folder and registered in pubspec.yaml.

Image.asset('assets/logo.png')

Other useful properties:

• width, height
• fit: for example, BoxFit.cover, BoxFit.contain, etc.

6. Icon Widget

Used to display Material Design icons:

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 32,
)

There are hundreds of built-in icons you can check at https://fonts.google.com/icons

Experiment: Combining Widgets into a Simple Layout

Now let’s combine all the widgets above into a simple layout.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
          color: Colors.blue[100],
          borderRadius: BorderRadius.circular(12),
        ),
        child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
      ),
      SizedBox(height: 16),
      Text(
        'Learning Flutter',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 8),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.thumb_up, color: Colors.green),
          SizedBox(width: 8),
          Text('Nice!'),
        ],
      )
    ],
  ),
)

Explanation:

• Center: to center the layout
• Column: vertical layout
• Container + Image: displays the Flutter logo
• Text: the title
• Row: icon and text combination

Conclusion

Today we learned about several basic widgets in Flutter:

• Text for displaying text
• Container as a flexible box
• Row and Column for arranging layouts horizontally and vertically
• Image for displaying images
• Icon for showing built-in icons

With this understanding, you now have the basics to start building cool and dynamic interfaces. Don’t hesitate to experiment!

On the fourth day, we’ll talk about input and forms, such as TextField, Button, and how to capture values from user input. Stay tuned!

See you tomorrow!

Don’t forget your coffee! ☕