Created
October 22, 2022 01:00
-
-
Save 1206yaya/1dde369cee317a64dfab01dfd40cadc8 to your computer and use it in GitHub Desktop.
LayoutWidgetのサンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
/// Container: デフォルトでは幅や高さを持たず、子要素の装飾ができる。 | |
/// Column: childrenを垂直に配置。 | |
/// Wrap: childrenにフィット。 | |
/// Center: widthFactorを指定しなければ全体に広がる | |
/// | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
// body: ColumnWidget(), | |
// body: WrapWidget(), | |
// body: ColumnWidget() | |
body: CenterWidget())); | |
} | |
} | |
class ColumnWidget extends StatelessWidget { | |
const ColumnWidget({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
decoration: BoxDecoration(color: Colors.amber, border: Border.all()), | |
child: Column(children: items)); | |
} | |
} | |
class WrapWidget extends StatelessWidget { | |
const WrapWidget({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
decoration: BoxDecoration(color: Colors.amber, border: Border.all()), | |
child: Wrap(children: items), | |
); | |
} | |
} | |
class ContainerWidget extends StatelessWidget { | |
const ContainerWidget({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
decoration: BoxDecoration(color: Colors.amber, border: Border.all()), | |
child: Column(children: items), | |
); | |
} | |
} | |
class CenterWidget extends StatelessWidget { | |
const CenterWidget({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
decoration: BoxDecoration(color: Colors.amber, border: Border.all()), | |
child: Center( | |
/** heightFactor or widthFactor を設定すると 上下 or 左右 に寄る */ | |
// 幅係数: null以外の場合は子要素の幅になる。2なら子要素の幅の2倍の幅 | |
// widthFactor: 1, | |
heightFactor: 1, | |
child: Wrap(children: items), | |
), | |
); | |
} | |
} | |
List<Widget> items = <Widget>[ | |
Chip( | |
avatar: CircleAvatar( | |
backgroundColor: Colors.blue.shade900, child: const Text('AH')), | |
label: const Text('Hamilton'), | |
), | |
Chip( | |
avatar: CircleAvatar( | |
backgroundColor: Colors.blue.shade900, child: const Text('ML')), | |
label: const Text('Lafayette'), | |
), | |
Chip( | |
avatar: CircleAvatar( | |
backgroundColor: Colors.blue.shade900, child: const Text('HM')), | |
label: const Text('Mulligan'), | |
), | |
Chip( | |
avatar: CircleAvatar( | |
backgroundColor: Colors.blue.shade900, child: const Text('JL')), | |
label: const Text('Laurens'), | |
), | |
]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment