Flutter Introduction
Understanding Flutter's core concepts and capabilities
📱 What is Flutter?
Flutter is an open-source UI software development kit created by Google for building natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.
// Flutter app structure
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
body: Center(
child: Text('Welcome to Flutter!'),
),
),
),
);
}
Output:
Welcome to Flutter!
Key Flutter Concepts
Widgets
Everything in Flutter is a widget
Text('Hello')
Container()
Row()
Column()Dart Language
Flutter uses Dart programming language
void main() {
print('Hello');
}Hot Reload
See changes instantly while developing
// Press 'r' to reload
// Press 'R' to restartMaterial Design
Built-in beautiful UI components
MaterialApp()
Scaffold()
AppBar()🔹 Flutter vs Other Frameworks
How Flutter compares to other mobile development frameworks:
Flutter Advantages:
- Single Codebase: Write once, deploy everywhere (iOS, Android, Web, Desktop)
- Fast Performance: Compiles to native ARM code
- Hot Reload: Instant updates during development
- Rich Widgets: Extensive library of customizable widgets
- Growing Community: Strong support and packages
🔹 Understanding Widgets
Widgets are the building blocks of Flutter apps:
// Stateless Widget - doesn't change
//After return you can start adding widgets with "child:" attribute.
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('I never change');
}
}
// Stateful Widget - can change
class MyCounter extends StatefulWidget {
@override
_MyCounterState createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
int count = 0;
@override
Widget build(BuildContext context) {
return Text('Count: $count');
}
}
🔹 Basic Widget Examples
Common widgets you'll use in Flutter:
// Text widget
Text('Hello Flutter')
// Container with styling
Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text('Styled Container'),
)
// Row - horizontal layout
Row(
children: [
Icon(Icons.star),
Text('Rating'),
],
)
// Column - vertical layout
Column(
children: [
Text('Title'),
Text('Subtitle'),
],
)
// Button
ElevatedButton(
onPressed: () {
print('Clicked!');
},
child: Text('Press Me'),
)
Output:
Hello Flutter
Title
Subtitle
🔹 Flutter Project Structure
Understanding the basic Flutter project layout:
my_flutter_app/
├── android/ # Android-specific files
├── ios/ # iOS-specific files
├── lib/ # Your Dart code goes here
│ └── main.dart # App entry point
├── test/ # Test files
├── pubspec.yaml # Dependencies and assets
└── README.md # Project documentation
Important Files:
- lib/main.dart: The starting point of your app
- pubspec.yaml: Manages packages and assets
- android/ & ios/: Platform-specific configurations
🔹 Your First Flutter Widget Tree
Flutter builds UI using a tree of widgets:
MaterialApp // Root widget
└── Scaffold // Page structure
├── AppBar // Top bar
│ └── Text('Title') // App title
└── Body // Main content
└── Center // Center alignment
└── Text('Hi!') // Content