Install Flutter and Editor
Online Flutter Editor
DartPad - https://dartpad.dev
Zapp - https://zapp.run/new
FlutLab.io - https://flutlab.io/editor/
UI Visualization
flutterstudio - https://flutterstudio.app
FlutterFlow - https://app.flutterflow.io/
Widget Catalog (Flutter) - https://docs.flutter.dev/ui/widgets
Flutter Gallery (Flutter.dev) - https://gallery.flutter.dev/
Icons class (Flutter) - https://api.flutter.dev/flutter/material/Icons-class.html
Colors class (Flutter) - https://api.flutter.dev/flutter/material/Colors-class.html
Image class (Flutter) - https://api.flutter.dev/flutter/widgets/Image-class.html
Common Packages
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math';
Day 1 (Stateless Widget vs Stateful Widget)
Watch and follow:
YouTube (Learn Flutter with Me) - Stateless vs Stateful | Flutter Example - https://www.youtube.com/watch?v=HsVUC6CcOqY
YouTube (Learn Flutter with Me) - An introduction to Flutter State (Flutter App From Scratch: Grocery List App, Episode 5) - https://www.youtube.com/watch?v=O5u6ElRn5TQ
main() function
void main()
The main function is the entry point to the dart program.
void runApp(Widget app) Function
See https://api.flutter.dev/flutter/widgets/runApp.html
Arrow syntax => Notation
void main() => runApp(const MyApp());
See https://dart.dev/language/functions
setState method
See https://api.flutter.dev/flutter/widgets/State/setState.html
Day 2 (AppBar, Text, TextField, MaterialButton, Cupertino)
Watch and follow:
YouTube (Mitch Koko) - How to get User Input from the Keyboard • Flutter Widget of the Day #22 - https://www.youtube.com/watch?v=LFQgZc4oKa4
MaterialApp
See https://api.flutter.dev/flutter/material/MaterialApp-class.html
AppBar
See https://api.flutter.dev/flutter/material/AppBar-class.html
TextEditingController
See https://api.flutter.dev/flutter/widgets/TextEditingController-class.html
Basic Structure
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp>{
final _textController = TextEditingController();
String str = 'Empty';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Column(
children: [
Text(str),
TextField(
controller: _textController,
),
MaterialButton(
child: Text('Press here'),
color: Colors.blue,
onPressed: (){
setState((){
str = _textController.text;
});
},
),
],
),
),
);
}
}
Cupertino Version
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp>{
final _textController = TextEditingController();
String str = 'Empty';
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(middle: Text('My App'),),
child: SafeArea(
child: Column(
children: [
Text(str),
CupertinoTextField(
controller:_textController,
),
CupertinoButton(
child: Icon(CupertinoIcons.hand_thumbsup),
color: CupertinoColors.systemBlue,
onPressed: (){
setState(() {
str = _textController.text;
});
},
),
],
),
),
),
);
}
}
Day 3 (Navigation Drawer, TextStyle, AlertDialog)
Readand follow:
Navigation Drawer (flutter.dev) - https://gallery.flutter.dev/#/demo/nav_drawer
Dialogs (flutter.dev) - https://gallery.flutter.dev/#/demo/dialog
Drawer
See https://api.flutter.dev/flutter/material/Drawer-class.html
DrawerHeader
See https://api.flutter.dev/flutter/material/DrawerHeader-class.html
ListTile
See https://api.flutter.dev/flutter/material/ListTile-class.html
TextStyle
See https://api.flutter.dev/flutter/painting/TextStyle-class.html
BoxDecoration
See https://api.flutter.dev/flutter/painting/BoxDecoration-class.html
showDialog
See https://api.flutter.dev/flutter/material/showDialog.html
Basic Structure
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My App'),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('My App',
style: TextStyle(
color: Colors.white,
fontSize: 26,
),
),
),
ListTile(
leading: Icon(Icons.face),
title: Text('About Me'),
onTap: (){
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Info'),
content: Text('You tapped About Me'),
actions: [
TextButton(
child: Text('Close'),
onPressed: (){
Navigator.pop(context);
},
),
],
),
);
},
),
ListTile(
leading: Icon(Icons.help_outline),
title: Text('Help'),
onTap: (){
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Info'),
content: Text('You tapped Help'),
actions: [
TextButton(
child: Text('Close'),
onPressed: (){
Navigator.pop(context);
},
),
],
),
);
}
),
],
),
),
),
);
}
}