Chapters 4 and 5
Opened this issue · 2 comments
Those chapters do not work due to null safety in Flutter 2.5 - it would be great if those could be updated
My take on flex_screen.dart
import 'package:flutter/material.dart';
class FlexScreen extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flexible and Expanded'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
..._header(context, 'Expanded'),
_buildExpanded(context),
..._header(context, 'Flexible'),
_buildFlexible(context),
Expanded(
child: Container(),
),
_buildFooter(context)
],
),
);
}
Iterable _header(BuildContext context, String text) {
return [
SizedBox(height: 20),
Text(
text,
style: Theme.of(context).textTheme.headline1,
),
];
}
Widget _buildExpanded(BuildContext context) {
return SizedBox(
height: 100,
child: Row(
children: [
LabeledContainer(
width: 100,
height: double.infinity,
color: Colors.green,
text: '100',
),
Expanded(
child: LabeledContainer(
color: Colors.purple,
text: 'The Remainder',
textColor: Colors.white,
),
),
LabeledContainer(
width: 40,
height: double.infinity,
color: Colors.green,
text: '40',
)
],
),
);
}
Widget _buildFlexible(BuildContext context) {
return SizedBox(
height: 100,
child: Row(
children: [
Flexible(
flex: 1,
child: LabeledContainer(
color: Colors.orange,
text: '25%',
),
),
Flexible(
flex: 1,
child: LabeledContainer(
color: Colors.deepOrange,
text: '25%',
),
),
Flexible(
flex: 2,
child: LabeledContainer(
color: Colors.blue,
text: '50%',
),
)
],
),
);
}
Widget _buildFooter(BuildContext context) {
return SafeArea(
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(40),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 15.0,
horizontal: 30,
),
child: Text(
'Pinned to the Bottom',
style: Theme.of(context).textTheme.subtitle1,
),
),
),
),
);
}
}
class LabeledContainer extends StatelessWidget {
final double width;
final double height;
final Color color;
final String text;
final Color textColor;
LabeledContainer({
//Key key,
this.width = double.infinity,
this.height = double.infinity,
required this.color,
required this.text,
this.textColor = Colors.black,
}) : super(key: ValueKey(text));
@OverRide
Widget build(BuildContext context) {
return Container(
width: width,
height: height,
color: color,
child: Center(
child: Text(
text,
style: TextStyle(
color: textColor,
fontSize: 20,
),
),
),
);
}
}
It looks like a great book, but the code does not work out of the box because of null safety Flutter changes, which makes following the exercises an exercise in frustration (no pun intended) - especially for beginners.
It would be great if the author can update the code and address flutter changes!