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!

How to choose a perfect business partner for your mobile application Development?

Arition Infotech – Top Digital Marketing/Mobile App Development/Website Development Company in Patna,Bihar

 

Today in this world there are millions and billions of smart phone users therefore mobile application development is creating boom in the market so that you can reach your business end the users.Today there are millions of users who use mobile application just to reach more and more up the market so in this blog we are going to tell you few point you must keep in your mind while choosing a mobile application development partner for your business.

read more