From c23cebdb424230bac832390865657f0464ae4cde Mon Sep 17 00:00:00 2001 From: nasustim Date: Sat, 26 Aug 2023 13:32:45 +0900 Subject: [PATCH 1/2] solve https://speakerdeck.com/mixi_engineers/2023-flutter-training?slide=37 --- lib/main.dart | 78 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 68 insertions(+), 10 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 63a8666..a355d5b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -95,16 +95,6 @@ class _MyHomePageState extends State { // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: [ - const SizedBox( - width: 50, - height: 50, - child: ColoredBox(color: Color(0xFFFFFF00)), - ), - const SizedBox( - width: 100, - height: 100, - child: ColoredBox(color: Color(0xFFFF0000)), - ), const Text( 'You have pushed the button this many times:', ), @@ -112,6 +102,74 @@ class _MyHomePageState extends State { '$_counter', style: Theme.of(context).textTheme.headline4, ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: const [ + SizedBox( + width: 40, + height: 40, + child: ColoredBox( + color: Color(0xFF0000FF), + ), + ), + SizedBox(width: 10), + SizedBox( + width: 40, + height: 40, + child: ColoredBox( + color: Color(0xFF0000FF), + ), + ), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + SizedBox( + width: 60, + height: 60, + child: ColoredBox( + color: Color(0xFFFF0000), + ), + ), + SizedBox(width: 10), + SizedBox( + width: 60, + height: 60, + child: ColoredBox( + color: Color(0xFFFF0000), + ), + ), + SizedBox(width: 10), + SizedBox( + width: 60, + height: 60, + child: ColoredBox( + color: Color(0xFFFF0000), + ), + ), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.end, + children: const [ + SizedBox( + width: 80, + height: 80, + child: ColoredBox( + color: Color(0xFF00FF00), + ), + ), + SizedBox(width: 10), + SizedBox( + width: 80, + height: 80, + child: ColoredBox( + color: Color(0xFF00FF00), + ), + ), + ], + ), ], ), ), From 8630ecc75ce1dc233f0995cac7d275723e58f6fe Mon Sep 17 00:00:00 2001 From: nasustim Date: Sat, 26 Aug 2023 14:46:31 +0900 Subject: [PATCH 2/2] refactoring --- lib/domain/align/model.dart | 20 +++++++ lib/main.dart | 85 +++++++--------------------- lib/widgets/my_colored_box.dart | 24 ++++++++ lib/widgets/my_colored_box_list.dart | 42 ++++++++++++++ 4 files changed, 106 insertions(+), 65 deletions(-) create mode 100644 lib/domain/align/model.dart create mode 100644 lib/widgets/my_colored_box.dart create mode 100644 lib/widgets/my_colored_box_list.dart diff --git a/lib/domain/align/model.dart b/lib/domain/align/model.dart new file mode 100644 index 0000000..5d24d6a --- /dev/null +++ b/lib/domain/align/model.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; + +enum AlignDirection { + start, + center, + end, +} + +MainAxisAlignment toMainAxisAlignment(AlignDirection ad) { + switch (ad) { + case AlignDirection.start: + return MainAxisAlignment.start; + case AlignDirection.center: + return MainAxisAlignment.center; + case AlignDirection.end: + return MainAxisAlignment.end; + default: + throw Error(); + } +} diff --git a/lib/main.dart b/lib/main.dart index a355d5b..92088ca 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:flutter_training_2023/domain/align/model.dart'; +import 'package:flutter_training_2023/widgets/my_colored_box_list.dart'; void main() { runApp(const MyApp()); @@ -102,73 +104,26 @@ class _MyHomePageState extends State { '$_counter', style: Theme.of(context).textTheme.headline4, ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: const [ - SizedBox( - width: 40, - height: 40, - child: ColoredBox( - color: Color(0xFF0000FF), - ), - ), - SizedBox(width: 10), - SizedBox( - width: 40, - height: 40, - child: ColoredBox( - color: Color(0xFF0000FF), - ), - ), - ], + const MyColoredBoxList( + width: 40, + height: 40, + align: AlignDirection.start, + amount: 2, + color: Color(0xFF0000FF), ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: const [ - SizedBox( - width: 60, - height: 60, - child: ColoredBox( - color: Color(0xFFFF0000), - ), - ), - SizedBox(width: 10), - SizedBox( - width: 60, - height: 60, - child: ColoredBox( - color: Color(0xFFFF0000), - ), - ), - SizedBox(width: 10), - SizedBox( - width: 60, - height: 60, - child: ColoredBox( - color: Color(0xFFFF0000), - ), - ), - ], + const MyColoredBoxList( + width: 60, + height: 60, + align: AlignDirection.center, + amount: 3, + color: Color(0xFFFF0000), ), - Row( - mainAxisAlignment: MainAxisAlignment.end, - children: const [ - SizedBox( - width: 80, - height: 80, - child: ColoredBox( - color: Color(0xFF00FF00), - ), - ), - SizedBox(width: 10), - SizedBox( - width: 80, - height: 80, - child: ColoredBox( - color: Color(0xFF00FF00), - ), - ), - ], + const MyColoredBoxList( + width: 80, + height: 80, + align: AlignDirection.end, + amount: 2, + color: Color(0xFF00FF00), ), ], ), diff --git a/lib/widgets/my_colored_box.dart b/lib/widgets/my_colored_box.dart new file mode 100644 index 0000000..792870f --- /dev/null +++ b/lib/widgets/my_colored_box.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; + +class MyColoredBox extends StatelessWidget { + final Color color; + final int width; + final int height; + const MyColoredBox( + {Key? key, + required this.color, + required this.width, + required this.height}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return SizedBox( + width: width.toDouble(), + height: height.toDouble(), + child: ColoredBox( + color: color, + ), + ); + } +} diff --git a/lib/widgets/my_colored_box_list.dart b/lib/widgets/my_colored_box_list.dart new file mode 100644 index 0000000..1f4cbc6 --- /dev/null +++ b/lib/widgets/my_colored_box_list.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_training_2023/domain/align/model.dart'; +import 'package:flutter_training_2023/widgets/my_colored_box.dart'; + +class MyColoredBoxList extends StatelessWidget { + final int width; + final int height; + final AlignDirection align; + final int amount; + final Color color; + const MyColoredBoxList({ + Key? key, + required this.width, + required this.height, + required this.align, + required this.amount, + required this.color, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + MainAxisAlignment mainAxisAlignment = toMainAxisAlignment(align); + + List children = List.filled( + amount, + [ + MyColoredBox( + color: color, + width: width, + height: height, + ), + const SizedBox(width: 10), + ], + ).expand((e) => e).toList(); + children = children.sublist(0, children.length - 1); // 末尾のSizedBoxを取り除く + + return Row( + mainAxisAlignment: mainAxisAlignment, + children: children, + ); + } +}