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!
.png)