Core Widgets & User Interaction

The Basic Building Blocks: Content Widgets

In Flutter, "everything is a widget," and we build our UI by composing them. Let's start with the most basic widgets—those that display content directly to the user.

Text

The Text widget is as fundamental as it gets: it displays a string of text. Its basic usage is straightforward: Text('Hello, world!'). However, its real power comes from the style property, which takes a TextStyle object. This is analogous to applying CSS styles or using a style prop in React.

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

The TextStyle object has dozens of properties you can set. Let's watch a detailed breakdown of the most common and useful ones.

Icon

For displaying graphical icons, Flutter provides the Icon widget. Out of the box, Flutter includes the entire Material Design icon set. You simply reference them using the Icons class. Like Text, you can easily control the size and color.

Icon(
  Icons.check_circle_outline,
  color: Colors.green,
  size: 48.0,
)

To use the Material icons, you need to ensure your pubspec.yaml file includes the uses-material-design: true flag, which is enabled by default in new Flutter projects.

Image

The Image widget is used to display images. It has several constructors for different sources, which should feel familiar from web development:

• Image.network('https://...url.../image.jpg') for loading images from a URL.
• Image.asset('assets/images/logo.png') for loading images included locally with your app.

Using local assets is a common requirement. It involves two simple steps:

1. Create a folder in your project root (e.g., assets/images/) and place your image file there.
2. Register this folder in your pubspec.yaml file to let your app know about it.

Let's look at a practical guide for this process.

The "Box": Container for Styling and Layout

If Text, Icon, and Image are the content, Container is the box you put them in. It is one of the most fundamental widgets for layout and styling, much like a <div> in HTML. By itself, it's an invisible box, but you can give it properties to add color, shape, size, and spacing.

A Container can have a single child widget. You use it to:

• Add padding and margins.
• Set a background color or decoration (like gradients, borders, or rounded corners).
• Define a specific width and height.
• Align its child.

Here's an example of a Text widget inside a styled Container:

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text('This is inside a container!'),
)

The Container is so versatile that it deserves a closer look.

As you can see, by composing these simple widgets, you can start building sophisticated UI elements. Below is the business card app from the article you reviewed. You can now recognize how it's built from these core widgets: Text for the name and title, a CircleAvatar containing an Image, and Containers for the phone and email fields, each holding an Icon and Text.

Making it Interactive: Handling User Input

A static UI isn't very useful. Let's see how to respond to user taps and clicks. Your experience with event handlers in JavaScript will make this feel very intuitive.

Button Widgets

Flutter provides several pre-built button widgets that follow Material Design guidelines. The two most common are:

• ElevatedButton: A raised button with a shadow, for primary actions.
• TextButton: A flat button with no elevation, for less prominent actions.

Both work the same way: you provide a child widget (usually a Text) for the button's label and an onPressed callback function that executes when the button is tapped. The onPressed property takes a function, and it's common to use an anonymous arrow function for this.

ElevatedButton(
  onPressed: () {
    print('Button was pressed!');
    // Your logic goes here
  },
  child: Text('Click Me'),
)

If onPressed is null, the button will be disabled automatically.

GestureDetector

What if you want to make something that isn't a button—like an Image or a Container—tappable? For this, you use the GestureDetector widget. It's an invisible widget that you wrap around any other widget to detect various gestures like taps, double-taps, long presses, and drags.

GestureDetector(
  onTap: () {
    print('The container was tapped!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.yellow,
    child: Center(child: Text('Tap me')),
  ),
)

This pattern is extremely powerful and is equivalent to adding an onClick listener to any element in the web world.

Conclusion

In this lesson, we've taken our first practical steps into building Flutter UIs. We moved from the abstract concept of widgets to using the concrete tools for the job.

Here are the key takeaways:

• Content Widgets: Text, Icon, and Image are your go-to widgets for displaying information.
• Styling & Layout Widget: The Container is your universal "box" for adding color, spacing (padding), borders, and shadows around any other widget.
• Input Widgets: ElevatedButton and TextButton provide standard button functionality. For custom tappable areas, you can wrap any widget with a GestureDetector.
• Composition is Key: All these widgets are designed to be nested inside one another (child/children properties) to build up your UI from simple, reusable pieces.

You now have a solid grasp of the most common widgets. In our next lesson, we will put all of this together in our first hands-on project: building a 'Digital Business Card' app. We'll compose a custom layout, display user data, and even fetch that data from a mock API, using the widgets and concepts you've mastered today.