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!