Skip to content

Instantly share code, notes, and snippets.

@johnpryan
Forked from RedBrogdon/hint.txt
Last active July 18, 2019 21:28
Show Gist options
  • Save johnpryan/326b8c5774079b7a80922e11a3730f99 to your computer and use it in GitHub Desktop.
Save johnpryan/326b8c5774079b7a80922e11a3730f99 to your computer and use it in GitHub Desktop.
Flutter Codelab - 9 - SizedBox
The important thing here is to add a SizedBox in between the other two widgets, and use `width: 50` to set its width.
import 'package:flutter_web/material.dart';
import 'package:flutter_web_test/flutter_web_test.dart';
import 'package:flutter_web_ui/ui.dart' as ui;
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
BlueBox(),
BlueBox(),
],
);
}
}
// A widget that appears as a blue square. Just ignore the details for now!
class BlueBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(),
),
);
}
}
import 'package:flutter_web/material.dart';
import 'package:flutter_web_test/flutter_web_test.dart';
import 'package:flutter_web_ui/ui.dart' as ui;
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: [
BlueBox(),
SizedBox(width: 100),
BlueBox(),
],
);
}
}
// A widget that appears as a blue square. Just ignore the details for now!
class BlueBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(),
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Container(
color: Color(0xffeeeeee),
child: Center(
child: Container(
child: MyWidget(),
color: Color(0xffcccccc),
),
),
),
);
}
}
Future<void> main() async {
await ui.webOnlyInitializePlatform();
runApp(MyApp());
final controller = LiveWidgetController(WidgetsBinding.instance);
final rows = controller.widgetList(find.byType(Row));
if (rows.length == 0) {
_result(false, ['Couldn\'t find a Row!']);
return;
}
if (rows.length > 1) {
_result(false, ['Found ${rows.length} Rows, rather than just one.']);
return;
}
final row = rows.first as Row;
if (row.mainAxisSize != MainAxisSize.max) {
_result(false, ['It\'s best to leave the mainAxisSize set to MainAxisSize.max, so there\'s space for the alignments to take effect.']);
return;
}
if (row.mainAxisAlignment == MainAxisAlignment.spaceAround
|| row.mainAxisAlignment == MainAxisAlignment.spaceBetween
|| row.mainAxisAlignment == MainAxisAlignment.spaceEvenly) {
_result(false, ['It\'s best to use MainAxisAlignment.start, MainAxisAlignment.end, or MainAxisAlignment.center to see how the SizedBox widgets work in a Row.']);
return;
}
if (row.children.length != 3) {
_result(false, ['The Row should end up with three children.']);
return;
}
if (row.children[0] is! BlueBox) {
_result(false, ['The Row\'s first child should be a BlueBox widget.']);
return;
}
if (row.children[1] is! SizedBox) {
_result(false, ['The Row\'s second child should be a SizedBox widget.']);
return;
}
if (row.children[2] is! BlueBox) {
_result(false, ['The Row\'s third child should be a BlueBox widget.']);
return;
}
final sizedBox = row.children[1] as SizedBox;
if (sizedBox.width != 100) {
_result(false, ['The SizedBox should have a width of 100.']);
return;
}
_result(true, ['Nice job!']);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment