いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- 枠線(BoxDecoration)の基本的な実装方法
- 枠線の色を変更する方法
- 枠線の太さを変更する方法
- 枠線を角丸に変更する方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
枠線(BoxDecoration)の基本的な実装方法
概要
Flutterにおける枠線の実装は、Containerウィジェットのdecorationプロパティを使用してBoxDecorationクラスを指定することで行います。このセクションでは、枠線の基本的な実装方法を示します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(),
),
child: Center(
child: Text('枠線のデモ', style: TextStyle(fontSize: 24)),
),
),
),
),
);
}
}サンプルコードの解説
- 5行目:
MyAppクラスは、アプリのルートウィジェットを定義します。 - 8行目:
MaterialAppウィジェットでアプリケーションの基本設計を定義します。 - 9-21行目:
ScaffoldとCenterウィジェットを使用して、画面の中央にContainerを配置します。 - 11-20行目:
Containerウィジェットで枠線を追加するために、decorationプロパティにBoxDecorationクラスを使用しています。この例では、Border.all()メソッドを使って全ての辺に枠線を追加しています。 - 18行目:
Textウィジェットを使って、Container内に「枠線のデモ」という文字列を表示しています。
表示確認
いちのそれでは、表示を確認してみましょ〜
枠線の色を変更する方法
概要
枠線の色を変更するには、BoxDecorationクラスのborderプロパティ内のBorder.allメソッドでcolorパラメータを使用します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.red), // 色を赤に変更
),
child: Center(
child: Text('赤い枠線のデモ', style: TextStyle(fontSize: 24)),
),
),
),
),
);
}
}サンプルコードの解説
- 15行目:
Border.allメソッドのcolorパラメータを使用して枠線の色を赤(Colors.red)に変更しています。これにより、Containerの周りに赤い枠線が表示されます。Textウィジェットを使って、Container内に「枠線のデモ」という文字列を表示しています。
表示確認
いちのそれでは、表示を確認してみましょ〜
枠線の太さを変更する方法
概要
枠線の太さを変更するには、BoxDecorationのborderプロパティでBorder.allメソッドのwidthパラメータを設定します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5.0), // 太さを5.0に設定
),
child: Center(
child: Text('太い赤い枠線のデモ', style: TextStyle(fontSize: 24)),
),
),
),
),
);
}
}サンプルコードの解説
- 15行目:
Border.allメソッドにwidthパラメータを追加し、枠線の太さを5.0に設定しています。これにより、より太い赤い枠線がContainerの周りに表示されます。
表示確認
いちのそれでは、表示を確認してみましょ〜
枠線を角丸に変更する方法
概要
枠線を角丸にするには、BoxDecorationのborderRadiusプロパティを使用して、BorderRadius.circularメソッドで角の丸みの大きさを指定します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5.0),
borderRadius: BorderRadius.circular(20.0), // 角を丸くする
),
child: Center(
child: Text('角丸の赤い枠線のデモ', style: TextStyle(fontSize: 24)),
),
),
),
),
);
}
}サンプルコードの解説
- 16行目:
BoxDecorationのborderRadiusプロパティにBorderRadius.circular(20.0)を設定して、角の丸みを20.0の大きさで指定しています。これにより、Containerの角が丸くなります。
表示確認
いちのそれでは、表示を確認してみましょ〜
点線の枠線を実装する方法にもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
まとめ
いかがでしたでしょうか？今回は、枠線(BoxDecoration)の実装方法。色、太さ、角丸に変更する方法を解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント
コメント一覧 （2件）
[…] 【Flutter】枠線(BoxDecoration)の実装方法、色、太さ、角丸に変更するまでの完… […]
[…] 【Flutter】枠線(BoxDecoration)の実装方法、色、太さ、角丸に変更するまでの完… […]