©Eny Setiyowati/Shutterstock.comA "Hello World" Dart Program
main() => print('Hello World');
A "Hello World" Flutter Program
import 'package:flutter/material.dart';
main() => runApp(HelloApp());
class HelloApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: Text("Hello world!"),
),
);
}
}
A Simple Scaffold
Scaffold(
appBar: AppBar(
title: Text("I'm aan AppBar."),
),
body: Center(
child: Text("I'm a Text widget."),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.ac_unit),
),
drawer: Drawer(
child: Center(child: Text("I'm a drawer.")),
),
)
A Cupertino App
import 'package:flutter/cupertino.dart';
void main() => runApp(CupterinoApp());
class CupterinoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Color.fromRGBO(66, 165, 245, 1.0),
middle: Text("I'm a navigation bar"),
),
child: Center(
child: Text('Hello from Cupertino, Californa!'),
),
),
);
}
}
A Column
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("I'm on top."),
Text("I'm in the middle."),
Text("I'm the bottom."),
],
)
Responding to a Button Press
import 'package:flutter/material.dart';
void main() => runApp(ButtonDemo());
class ButtonDemo extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
String _whatToDisplay;
void initState() {
_whatToDisplay = 'Click Me';
}
void _doSomething() {
setState(() {
_whatToDisplay = 'Thank you for clicking';
});
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
child: Text(_whatToDisplay),
onPressed: _doSomething,
),
),
);
}
}
Some Useful Layout Widgets
Material(
child: SafeArea(
child: Column(
children: [
Expanded(
child: Container(
height: 50.0,
color: Colors.blue,
),
),
SizedBox(
height: 50.0,
),
Container(
alignment: Alignment.bottomRight,
height: 100.0,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
'Hello',
style: TextStyle(backgroundColor: Colors.red),
),
),
),
],
),
),
)
A Text Field
class _MyHomePageState extends State {
final _myController = TextEditingController();
@override
void dispose() {
_myController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(labelText: "Type something:"),
controller: _myController,
),
RaisedButton(
child: Text("UPPERCASE"),
onPressed: () =>
_myController.text = _myController.text.toUpperCase(),
),
],
),
),
);
}
}
A Slider
class _MyHomePageState extends State {
double _sliderValue = 1.0;
void _refreshSlider(double newValue) {
setState(() {
_sliderValue = newValue;
});
}
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_sliderValue.toStringAsFixed(2)),
Slider(
value: _sliderValue,
onChanged: _refreshSlider,
min: 1.0,
max: 10.0,
)
],
),
),
);
}
}
Radio Buttons
class _MyHomePageState extends State {
int _radioValue;
void _refreshRadio(int newValue) {
setState(() {
_radioValue = newValue;
});
}
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_radioValue?.toString() ?? 'Select One'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('0'),
Radio(
value: 0,
groupValue: _radioValue,
onChanged: _refreshRadio),
Text('1'),
Radio(
value: 1,
groupValue: _radioValue,
onChanged: _refreshRadio),
Text('2'),
Radio(
value: 2,
groupValue: _radioValue,
onChanged: _refreshRadio,
)
],
),
],
),
),
);
}
}
Basic Navigation
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: RaisedButton(
child: Text('Go to second page'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
),
);
},
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
A List
List movieName = [
"Casablanca",
"Citizen Kane",
"Lawrence of Arabia",
];
ListView.builder(
itemCount: movieName.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(movieName[index]),
onTap: () => _goToDetailPage(movieName[index]));
},
)
Animation
class MyHomePageState extends State
with SingleTickerProviderStateMixin {
Animation animation;
AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this);
animation = Tween(begin: 100.0, end: 500.0).animate(controller)
..addListener(() {
setState(() {});
});
controller.forward();
}
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: [
Positioned(
left: 150.0,
top: animation.value,
child: Icon(
Icons.music_note,
size: 70.0,
),
),
],
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}