DEV Community

Cover image for Flutter Fundamentals: Unwrapping the Essentials of Basic Widgets
Eldho Paulose
Eldho Paulose

Posted on

Flutter Fundamentals: Unwrapping the Essentials of Basic Widgets

Introduction

Flutter, Google’s UI toolkit for crafting natively compiled applications for mobile, web, and desktop from a single codebase, has gained immense popularity. At the heart of Flutter are its widgets, the building blocks of any Flutter app. Understanding these widgets is crucial for any Flutter developer. In this blog, we will unwrap the essentials of basic Flutter widgets and how to use them.

What are Widgets in Flutter?

Widgets in Flutter describe what their view should look like given their current configuration and state. When a widget’s state changes, Flutter rebuilds the widget to reflect the changes. This declarative approach to UI development makes the code more predictable and easier to manage.


Basic Flutter Widgets


Scaffold

The Scaffoldwidget is the base of the visual interface and provides a structure to the app, such as an AppBar, Drawer, BottomNavigationBar, and more.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Demo'),
  ),
  body: Center(
    child: Text('Hello, world!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Enter fullscreen mode Exit fullscreen mode

Text

The Text widget is used to display a string of text with a single style.

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)
Enter fullscreen mode Exit fullscreen mode

Container

The Containerwidget is a versatile widget that can contain a single child widget, and allows you to customize its appearance with padding, margin, borders, and background color.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Text('I am inside a container'),
)
Enter fullscreen mode Exit fullscreen mode

Row and Column

Row and Column widgets are used to arrange other widgets in a horizontal and vertical manner respectively.

Row Example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children:[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)
Enter fullscreen mode Exit fullscreen mode

Column Example:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children:[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)
Enter fullscreen mode Exit fullscreen mode

Image

The Imagewidget is used to display images in your Flutter app.

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

Icons

The Iconwidget is used to display Material icons.

Icon(
  Icons.favorite,
  color: Colors.pink,
  size: 24.0,
)
Enter fullscreen mode Exit fullscreen mode

Button Widgets

Buttons are used to capture user interactions and can come in various forms such as ElevatedButton, TextButton, and IconButton.

ElevatedButton Example:

ElevatedButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Elevated Button'),
)
Enter fullscreen mode Exit fullscreen mode

TextButton Example:

TextButton(
  onPressed: () {
    print('Pressed');
  },
  child: Text('Text Button'),
)
Enter fullscreen mode Exit fullscreen mode

IconButton Example:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('Pressed');
  },
)
Enter fullscreen mode Exit fullscreen mode

Conclusion

These basic widgets form the foundation of any Flutter application. By mastering these, you will be well-equipped to build more complex interfaces. Remember, Flutter’s true power lies in its widget composition, allowing you to create sophisticated UIs from simple building blocks.


Connect with Me

If you enjoyed this post and want to see more of my work, feel free to check out my GitHub and personal website:

Top comments (1)

Collapse
 
rammbi profile image
Raman

Thanks for this post. I am a beginner in flutter and this post helps me a lot.