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(, color:

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>[

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

Row(children: <Widget>[

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

width: 100.0,
height: 100.0,
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”.

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!

Flutter First Lesson Tutorial: Introduction to Flutter and Setting Up Your Development Environment

 **Lesson 1: Getting Started with Flutter**

Mobile App Development

**1. What is Flutter?**

– Flutter is an open-source UI software development toolkit created by Google.
– It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase.

**2. Advantages of Flutter:**

– **Single Codebase:** Write once, run on both iOS and Android.
– **Hot Reload:** See changes instantly without fully restarting the app.
– **Rich Widgets:** A vast collection of customizable widgets for creating complex UIs.

**3. Installing Flutter:**

*Note: Before installing Flutter, make sure you have Git installed on your machine.*

a. **For macOS**:
– Download the latest stable Flutter SDK from the official [Flutter website](
– Extract the file and add it to your PATH.

b. **For Windows**:
– Download the Flutter SDK from the official [Flutter website](
– Extract the zip file and place the contained flutter in the desired installation path.
– Add the path to your environment variables.

c. **For Linux**:
– Follow instructions on the official [Flutter website](

**4. Verify Installation**:
– Open a terminal or command prompt.
– Run the command: `flutter doctor`
– This tool checks for any dependencies you still need to install. Follow any prompts or recommendations to complete the setup.

**5. Setting Up an Emulator**:

– **Android**: You can use the Android Studio’s AVD Manager to set up an Android emulator.
– **iOS (macOS only)**: Use Xcode to set up an iOS simulator.

**6. Your First Flutter App**:

– In your terminal or command prompt, run:

flutter create my_first_app
cd my_first_app
flutter run

– This will create and run a new Flutter app. If set up correctly, you’ll see a sample app on your emulator.

1. Install Flutter on your machine.
2. Set up an emulator for Android or iOS.
3. Create and run your first Flutter app.

Stay tuned for our next lesson where we’ll dive deeper into Flutter’s widget-based architecture and start building our first custom app!

Note: This tutorial assumes a basic understanding of programming concepts. If you’re an absolute beginner, it might be helpful to review some fundamental programming concepts before delving into Flutter.


Arition Infotech ! Contact for any type of Mobile App Development.