Flutter MDC Codelabs: Some extra details

Stateless vs Stateful widgets

Derive from Stateless- or Stateful-Widget
More code is required for a stateful widget
import 'package:flutter/material.dart';class Ex1Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: ...,
);
}
}
import 'package:flutter/material.dart';class Ex2Page extends StatefulWidget {
_Ex2PageState createState() => _Ex2PageState();
}
class _Ex2PageState extends State<Ex2Page> {
@override
Widget build(BuildContext context) {
return Container(
child: ...,
);
}
}

MDC-101 Flutter: Material Components Basics

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[
SizedBox(height: 80.0),
Column(
children: <Widget>[
Image.asset('assets/diamond.png'),
SizedBox(height: 16.0),
Text('SHRINE'),
],
),
SizedBox(height: 120.0),
TextField(
controller: _usernameController,
decoration: InputDecoration(
filled: true,
labelText: 'Username',
),
),
SizedBox(height: 12.0),
TextField(
controller: _passwordController,
decoration: InputDecoration(
filled: true,
labelText: 'Password',
),
obscureText: true,
),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text('CANCEL'),
onPressed: () {
_usernameController.clear();
_passwordController.clear();
},
),
RaisedButton(
child: Text('NEXT'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
],
),
),
);
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store