FLUTTER
Day 1
What is Flutter?
Flutter is an open-source UI toolkit by Google to build
natively compiled, cross-platform applications for
mobile, web, and desktop from a single codebase.
Flutter setup-local
Installing Flutter SDK
1. flutter install windows
2. Download the Flutter Windows zip file.
3. Extract the zip to a suitable location (e.g., C:\flutter).
4. Add flutter\bin to the System Environment Variable Path:
Search “Edit environment variables”
Click Environment Variables > Path > New
Add: C:\flutter\bin
Setting up an IDE
Install VS Code.
Add the Flutter and Dart plugins to your IDE.
Use flutter doctor to verify the setup.
Set up Android Emulator (Optional but recommended)
Install Android Studio from:https://developer.android.com/studio
Creating Your First Flutter Project
flutter create my_first_app
cd my_first_app
flutter run
Flutter setup-online
Website: https://flutlab.io
✅ Step 1: Create an Account
1. Visit 👉 https://flutlab.io
2. Click Sign Up or Login with Google, GitHub, or Email.
3. You’ll be taken to the dashboard.
✅ Step 2: Create a New Project
1. Click “Create New Project”
2. Choose a template:
3. Enter your project name and click Create.
✅ Step 3: Edit Your Code
1. The web-based IDE opens with file explorer, code editor, and
preview pane.
2. Edit lib/main.dart or add new Dart files, widgets, etc.
3. You can also upload assets, change pubspec.yaml, etc.
My first code:
main.dart:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Hai'),
),
body: Center(
child: Text(
'Hello Welcome to college!',
style: TextStyle(fontSize: 30),
),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(title: Text('Hai'), ),
body: Center(
child: Text(
'Hello Welcome to college!',
style: TextStyle(fontSize: 30),
),
),
),
);
}
}
For a simple project
lib/
├── screens/
│ ├── home_screen.dart
│ └── detail_screen.dart
├── widgets/
│ └── custom_widgets.dart
├── models/
│ └── item_model.dart
├── services/
│ └── data_service.dart
└── main.dart
assets/
└── images/
Widgets
Scaffold: Basic app layout
AppBar: Top navigation bar
Column, Row: Layout direction
TextField: User input
Container: Box with styling
Padding, Margin: Spacing control
TextStyle: Font styling
ElevatedButton: Button with action
Scaffold (Screen Layout)
Scaffold is the basic layout structure for a Flutter app
screen.
Scaffold is a layout base —many properties:
Common properties:
** appBar
** body
** floatingActionButton
** bottomNavigationBar
** drawer
**backgroundColor
Scaffold(
appBar: AppBar(title: Text("My App")),
body: Center(child: Text("Hello World")),
)
________________________________________________________
Column
Arranges widgets vertically.
Column is a widget — no types — but it has
mainAxisAlignment, crossAxisAlignment to change
layout behavior.
Variations via alignment:
MainAxisAlignment.start / center / end / spaceEvenly /
spaceBetween / spaceAround
CrossAxisAlignment.start / center / end / stretch
Column(
children: [
Text("One"),
Text("Two"),
],
)
________________________________________________________
___
Row
Arranges widgets horizontally.
Horizontal layout
Wrap inside Expanded, Flexible
Row(
children: [
Icon(Icons.star),
Text("Star"),
],
)
________________________________________________________
_______
Widget Tree:
Container
A box that can hold child widgets and control
size, color, border, margin, etc.
Container doesn’t have types, but allows customization
via:
** width, height
** margin, padding
** color
** alignment
** decoration (BoxDecoration → borders, radius,
image)
Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text("Box")),
)
________________________________________________________
_____________
Padding
Space inside the widget.
No types — but EdgeInsets has 4 main styles:
EdgeInsets.all(10) – all sides
EdgeInsets.symmetric(vertical: 10, horizontal: 20)
EdgeInsets.only(left: 10, top: 5)
EdgeInsets.fromLTRB(10, 10, 5, 5)
Padding(
padding: EdgeInsets.all(10),
child: Text("Hello"),
)
________________________________________________________
_______________
Margin
Margin is the space outside a widget.
It pushes the widget away from surrounding
widgets or screen edges.
🔹 Types of EdgeInsets (for Margin)
Syntax Meaning
EdgeInsets.all(10) Margin on all sides
EdgeInsets.only(left: 10, top: Margin only on specific
20) sides
Margin on left & right
EdgeInsets.symmetric(horiz
(horizontal) and top &
ontal: 15, vertical: 10)
bottom (vertical)
EdgeInsets.fromLTRB(10, Margin: Left, Top,
20, 30, 40) Right, Bottom
margin: EdgeInsets.all(10)
Container(
margin: EdgeInsets.all(10),
child: Text("With Margin"),
)
________________________________________________________
__________
Text
** TextStyle
** maxLines
** overflow
** textAlign
** softWrap
Text(
"Welcome!",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.bold),
)
________________________________________________________
________________
TextField
Input Field:
TextField has types of use-cases:
** Normal Input
** Password Input → obscureText: true
** Multiline → maxLines: null
** Number input → keyboardType:
TextInputType.number
Other variations via:
** controller
** decoration → labelText, hintText, prefixIcon,
etc.
TextField(
decoration: InputDecoration(
labelText: 'Enter Name',
border: OutlineInputBorder(),
),
)
Border:
InputBorder.none
UnderlineInputBorder
________________________________________________________
____________
Button
Button Type Widget Name
Elevated ElevatedButto
Button n
Flat Button
TextButton
(old)
Outline OutlinedButto
Button n
Icon Button IconButton
Floating FloatingAction
Button Button
Elevated Button:
ElevatedButton(
onPressed: () {
print("Clicked");
},
child: Text("Submit"),
)
________________________________________________________
_______________
Colors
Used for background, text, borders, etc.
There are many color types from Colors class:
** Basic colors: Colors.red, Colors.blue
** Shades: Colors.red[100], Colors.blueAccent
** Custom color: Color(0xFF00FF00)
color: Colors.red,
________________________________________________________
________
TextStyle
Used in Text to customize font.
TextStyle(
fontSize: 18,
color: Colors.green,
fontWeight: FontWeight.bold,
)
________________________________________________________
_______________
Full Program
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Login Page")),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Welcome!",
style: TextStyle(fontSize: 24, fontWeight:
FontWeight.bold),
),
SizedBox(height: 20),
TextField(
decoration: InputDecoration(
labelText: "Username",
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
TextField(
obscureText: true,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
print("Login button pressed");
},
child: Text("Login"),
),
],
),
),
),
);
}
}
________________________________________________________
________________
DAY 2
children
