Flutter UI Lab - Exp 2A | Basic Widgets | No Audio | Practice Session
Embrace by Sappheiros | / sappheirosmusic
Music promoted on https://www.chosic.com/free-music/all/
Creative Commons Attribution 3.0 Unported (CC BY 3.0)
https://creativecommons.org/licenses/...
0:00 - Project Setup
5:00 - Code Start
15:00 - UI Widgets
30:00 - Git Integration
Great! Here's a *human-written, plagiarism-free* full *YouTube video description* under 5000 characters. It’s clear, beginner-friendly, and includes code/commands in a natural flow to help your viewers follow along easily:
---
🔵 *Flutter UI Widgets – Experiment 2A | Step-by-Step Practice | No Voice*
📅 *Session Time:* 3:15 PM – 4:15 PM
⏱️ *Video Length:* 38 Minutes
📂 *Session Topic:* UI Design using Flutter – Basic Widget Practice (Experiment 2A)
---
👋 About this Session:
In this session, we began working on *Experiment 2A* of the Flutter UI Design lab. If you're just starting with Flutter, this session will give you hands-on clarity on how to manage your files, fix common terminal errors, and start writing widget-based UI code in Dart.
We did this on **Ubuntu OS**, but Windows users can follow along with similar steps inside Android Studio or VS Code.
---
🧑💻 What We Practiced:
#### ✅ 1. Verified Flutter Setup
We made sure our project was correctly running by executing a basic Flutter app that showed:
```dart
Text("Hello Flutter");
```
The app was launched successfully using:
```bash
flutter run
```
---
#### 📁 2. Organized Folder for Experiments
We created a clean folder structure to keep all our experiments in one place:
```bash
cd lib
mkdir experiments
```
This helps keep your Dart files organized and easy to import later.
---
#### ⚠️ 3. Faced a Common File Creation Error
When we tried:
```bash
touch lib/experiments/exp_2a_widgets.dart
```
We saw an error because we were already inside `lib/`.
So we corrected it like this:
```bash
touch experiments/exp_2a_widgets.dart
```
Then we verified it was created successfully with:
```bash
ls experiments/
```
---
#### 🧠 4. Understood How to Import Dart Files
We discussed how `main.dart` can import other Dart files like this:
```dart
import 'experiments/exp_2a_widgets.dart';
```
This keeps the main file clean and allows each experiment to live in its own file.
---
#### 🔄 5. Initialized Git Repository
To track our code versions and possibly push to GitHub later, we initialized Git inside the project:
```bash
cd ~/StudioProjects/flutter_ui_lab
git init
```
No commits yet, but it’s ready for version control!
---
📌 Summary:
This was more of a setup and groundwork session where we:
✅ Ran the initial Flutter app
✅ Created an `experiments/` folder
✅ Handled terminal errors with file paths
✅ Prepared `exp_2a_widgets.dart` for writing UI code
✅ Initialized a Git repo
---
🧱 What's Next in Experiment 2A?
In the next video/session, we’ll start building actual widgets like:
`Container`
`Row`
`Column`
`Text`
`Image`
`Scaffold`
And bring the UI to life with hands-on code!
---
💬 Who is this for?
This video is helpful if you're:
A beginner in *Flutter & Dart*
A student practicing UI lab exercises
Someone using *Ubuntu/Linux* for Flutter dev
Looking to understand file management and basic project setup
---
🖥️ System Used:
*Laptop 1:* Ubuntu 22.04 | i7 | 16GB RAM
*Laptop 2:* Ubuntu | i5 | 4GB RAM (tested both)
Runs Flutter fine with some patience 😄
---
📌 *Note:* No voiceover in this video – just code, terminal, and direct practice. Perfect for students to revise while watching silently.
---
👍 Like | 🔔 Subscribe | 📁 Comment below for any doubts or GitHub repo link.