Commonly Used Widgets in Flutter: A Guide to Text, Image, Container, Button, and More

Spread the love

Flutter provides a wide range of pre-built widgets that simplify the process of building beautiful and interactive user interfaces. In this blog post, we will explore some of the commonly used widgets in Flutter and understand their usage and functionality.

Commonly Used Widgets in Flutter A Guide to Text Image Container Button and More

Text Widget

The Text widget allows you to display text on the screen. It supports various styling options, such as font size, color, alignment, and more.


Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 20, color: Colors.black),
)


Image Widget

The Image widget is used to display images in your Flutter app. You can load images from local assets or network URLs.


Image.asset('assets/images/my_image.png')


Container Widget

The Container widget is a versatile widget that provides layout and styling capabilities. It can be used to specify dimensions, padding, margin, background color, and more.


Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Container Widget'),
)


Button Widgets

Flutter provides multiple button widgets for handling user interactions. Some commonly used button widgets include:

ElevatedButton

The ElevatedButton widget creates a material-design-style raised button.


ElevatedButton(
  onPressed: () {
    // Handle button press
  },
  child: Text('Click Me'),
)


TextButton

The TextButton widget creates a text-based button.


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


IconButton

The IconButton widget creates an icon-based button.


IconButton(
  onPressed: () {
    // Handle button press
  },
  icon: Icon(Icons.add),
)

ListTile Widget

The ListTile widget is used to display a row with leading and trailing widgets, typically used in lists or menus.


ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
  subtitle: Text('Software Engineer'),
)


Card Widget

The Card widget is used to create a material-design-style card with a shadow and rounded corners.


Card(
  child: ListTile(
    leading: Icon(Icons.person),
    title: Text('John Doe'),
    subtitle: Text('Software Engineer'),
  ),
)


TextField Widget

The TextField widget provides a text input field where users can enter text.


TextField(
  onChanged: (value) {
    // Handle text input changes
  },
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
  ),
)


Other Commonly Used Widgets

Here are a few more commonly used widgets in Flutter:

AppBar

The AppBar widget represents the top app bar in your application. It typically contains a title, actions, and navigation buttons.


AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      onPressed: () {
        // Handle action button press
      },
      icon: Icon(Icons.settings),
    ),
  ],
)


Scaffold

The Scaffold widget provides a basic structure for your app, including an app bar, body, and other essential UI elements.


Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Container(
    child: Text('Welcome to my app!'),
  ),
)


SingleChildScrollView

The SingleChildScrollView widget allows you to create a scrollable view for content that exceeds the screen’s height.


SingleChildScrollView(
  child: Column(
    children: [
      // Widget content here
    ],
  ),
)


Conclusion

Understanding and utilizing commonly used widgets in Flutter is essential for building engaging and interactive user interfaces. The Text, Image, Container, Button, ListTile, Card, TextField, and other mentioned widgets offer a solid foundation for creating dynamic and visually appealing Flutter applications.

Experiment with these widgets, explore their properties and capabilities, and combine them creatively to craft stunning user interfaces in your Flutter projects. Happy widget-building!

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *