Getting Started
Flutter Setup
cd ~/development
unzip ~/Downloads/flutter_macos_3.13.0-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"
# Install Flutter on Windows
C:\src>flutter doctor
# Check installation
flutter doctor
# Create a new project
flutter create my_app
cd my_app
# Run the app
flutter run
Basic App Structure
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
Widgets
Basic Widgets
Text(
'Hello, World!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)
// Button widgets
ElevatedButton(
onPressed: () {
// Handle button press
},
child: Text('Click Me'),
)
TextButton(
onPressed: () {},
child: Text('Text Button'),
)
IconButton(
onPressed: () {},
icon: Icon(Icons.favorite),
)
Layout Widgets
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Left'),
Text('Right'),
],
)
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Top'),
Text('Bottom'),
],
)
// Container with styling
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 4,
offset: Offset(0, 2),
),
],
),
child: Text('Container with shadow'),
)
Material Widgets
AppBar(
title: Text('My App'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
),
],
)
// Card
Card(
child: ListTile(
leading: Icon(Icons.album),
title: Text('Card Title'),
subtitle: Text('Subtitle text'),
trailing: Icon(Icons.more_vert),
onTap: () {
// Handle tap
},
),
)
Custom Widgets
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
CustomButton({required this.text, required this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
child: Text(text),
);
}
}
// Usage
CustomButton(
text: 'Custom Button',
onPressed: () {
print('Button pressed');
},
)
State Management
Stateful Widget
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
Provider Pattern
class CounterModel with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
// Wrap your app with Provider
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => CounterModel(),
child: MyApp(),
),
);
}
// Access the model in widgets
Consumer<CounterModel>(
builder: (context, counter, child) {
return Text('Count: ${counter.count}');
},
)
Dart Language
Dart Basics
var name = 'John'; // Type inferred
String name = 'John'; // Explicit type
final String nickname = 'Johnny'; // Cannot be changed
const String fullName = 'John Doe'; // Compile-time constant
// Functions
void printName(String name) {
print(name);
}
// Arrow function
void printName(String name) => print(name);
// Optional parameters
void printDetails(String name, [int? age]) {
print('Name: $name, Age: $age');
}
// Named parameters
void printPerson({String? name, int? age}) {
print('Name: $name, Age: $age');
}
Classes & Async
class Person {
String name;
int age;
Person(this.name, this.age);
// Named constructor
Person.newborn(String name) : this(name, 0);
// Method
void introduce() {
print('Hello, I am $name and I am $age years old');
}
}
// Async programming
Future<String> fetchUserData() async {
await Future.delayed(Duration(seconds: 2));
return 'User Data';
}
// Using async/await
void getUserData() async {
try {
String data = await fetchUserData();
print(data);
} catch (e) {
print('Error: $e');
}
}
Comprehensive Flutter App Development Cheatsheet Reference
This Flutter App Development cheatsheet on Nikhil Learn Hub collects syntax, commands, and practical snippets for quick revision. Learn Flutter widgets, layouts, navigation, state management, and cross-platform app development with examples.
Use the reference cards and examples above during coding sessions; return here instead of scattered searches when you need dependable reminders. Follow the Flutter learning roadmap when you want structured lessons beyond one-page lookups.
Quick lookup coverage
- Syntax, commands, and API signatures
- Copy-ready examples and common patterns
- Terminology for coursework and interviews
- Cross-links to the matching learning roadmap
How to study with this sheet
- Production debugging and tuning reminders
- Security, performance, or scale cautions
- Integration with adjacent stacks on this site
- Deeper study through tutorials and roadmaps
Who Should Use This Cheatsheet
Students, self-taught developers, and professionals who need fast Flutter App Development lookups during labs, debugging, or interview revision should keep this page bookmarked.
Related Resources on Nikhil Learn Hub
- Flutter learning roadmapstructured learning path for the same technology
- Cheatsheets hubbrowse all quick-reference sheets
- Technology hubtutorials, roadmaps, and practice hubs