こんにちは。スマホアプリをメインに開発しているロッキーカナイです。
FlutterでContainerをもっとクールに！おしゃれにしたいと誰もが思うのですが、今日はContainerに角丸の枠線やボーダー、塗り潰しなどを方法を紹介します。
Container角丸の枠線
ContainerのdecorationにカスタムのBoxDecorationパラメーラを与えます。
|
1 2 3 4 5 6 7 8 9 10 11 |
Container( padding: const EdgeInsets.all(5.0), width: 200, decoration: BoxDecoration( border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(10), ), child: Container( child: const Text("Containerの角丸枠線"), ), ), |
Containerの枠線
先ほどのコードにborderRadiusをなくすと、四角ボーダーになります。
|
1 2 3 4 5 6 7 8 9 10 |
Container( padding: const EdgeInsets.all(5.0), width: 200, decoration: BoxDecoration( border: Border.all(color: Colors.yellow), ), child: Container( child: const Text("Containerの枠線"), ), ), |
Containerのborder設定
次は、Containerでのボーダーを色々やってみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Container( width: 200, height: 100, decoration: BoxDecoration( border: const Border( left: const BorderSide( color: Colors.black, width: 3, ), top: const BorderSide( color: Colors.black, width: 3, ), right: const BorderSide( color: Colors.black, width: 3, ), bottom: const BorderSide( color: Colors.black, width: 3, ), ), ), child: const Text('カスタムボーダー全方位'), ), |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
Container( width: 200, height: 100, decoration: BoxDecoration( border: const Border( left: const BorderSide( color: Colors.black, width: 3, ), ), ), child: const Text('カスタムボーダー左'), ), Container( width: 200, height: 100, decoration: BoxDecoration( border: const Border( top: const BorderSide( color: Colors.black, width: 3, ), ), ), child: const Text('カスタムボーダー上'), ), Container( width: 200, height: 100, decoration: BoxDecoration( border: const Border( right: const BorderSide( color: Colors.black, width: 3, ), ), ), child: const Text('カスタムボーダー右'), ), Container( width: 200, height: 100, decoration: BoxDecoration( border: const Border( bottom: const BorderSide( color: Colors.black, width: 3, ), ), ), child: const Text('カスタムボーダー下'), ), |
Containerの円
円だって簡単です。
塗りつぶす場合はBoxDecorationのcolorパラメータを設定します。
|
1 2 3 4 5 6 7 8 |
Container( width: 100, height: 100, decoration: const BoxDecoration( shape: BoxShape.circle, color: Colors.blue, ), ), |
ABOUT ME
