Search for:
Flutter Tutorial: Exploring Widgets and Basic Layouts

Lesson 2: Delving Deeper into Flutter Widgets

**1. What are Widgets?**

– In Flutter, everything is a widget! Widgets describe what the app’s view should look like with its current configuration and state.
– Widgets are nested, forming a tree structure. This allows for complex UIs with layered elements.

**2. Basic Widgets to Know:**

a. **Text Widget**:
– Displays a string of text with a single style.

Text(‘Hello, Flutter!’)

b. **Image Widget**:
– Displays different types of images.

Image.asset(‘assets/flutter.jpg’) // for local images

c. **Icon Widget**:
– Displays a graphical symbol representing a common action or item.

Icon(Icons.star, color: Colors.blue)

d. **RaisedButton**:
– A Material Design raised button.

RaisedButton(onPressed: () {}, child: Text(‘Click Me’))

**3. Basic Layout Widgets:**

a. **Column**:
– Places its children vertically.

Column(children: <Widget>[
Text(‘First!’),
Text(‘Second!’),
Text(‘Third!’),
])

b. **Row**:
– Places its children horizontally.

Row(children: <Widget>[
Icon(Icons.star),
Text(‘Star’),
])

c. **Container**:
– A convenience widget that combines common painting, positioning, and sizing widgets.

Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
child: Text(‘Inside Container’)
)

**4. Using Material Components**:

Flutter offers a rich set of Material Design widgets. To utilize these, ensure your main app structure is wrapped with `MaterialApp`.

void main() => runApp(MaterialApp(home: YourWidgetClass()));

**5. Practice Time**:

Let’s create a basic user profile layout.

– Use a `Column` widget to stack elements vertically.
– Add an `Image` widget for the profile picture.
– Below the image, add a `Text` widget for the user’s name.
– Add another `Text` widget for a short user bio or description.
– Finish with a `RaisedButton` that says “Follow”.

**Assignment**:
1. Create the basic user profile layout as described above.
2. Play around! Add more widgets, try different layout structures, or customize appearance.

In our next lesson, we’ll dive into more advanced layout techniques, exploring how to make your UI responsive and visually appealing. See you then!