【Flutter】Containerの基本実装から角丸にする方法について解説

2024年3月2日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

Containerウィジェットの基本的な使い方
角丸（borderRadius）を設定する方法

開発環境

Dart 3.0.0
Flutter 3.10.0

Containerの基本実装

概要

FlutterのContainerウィジェットは、デザインとレイアウトに非常に重要な役割を果たします。ここでは、Containerの基本的な使い方についてサンプルコードと共に解説します。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          // Centerウィジェットを使用して中央揃えに
          child: Container(
            // Containerの幅を200に設定
            width: 200,
            // Containerの高さを100に設定
            height: 100,
            // 背景色を青に設定
            color: Colors.blue,
            // Container内のテキスト
            child: Text(
              'Flutter',
              // テキストを中央揃えに設定
              textAlign: TextAlign.center,
              // テキストのスタイルを設定
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

10行目: Centerウィジェットを使用して、子ウィジェットを中央に配置します。
14行目: Containerのwidthプロパティを使用して幅を200ピクセルに設定します。
16行目: heightプロパティを使用して高さを100ピクセルにします。
18行目: colorプロパティで背景色を青に設定します。
21行目: Container内にTextウィジェットを配置し、表示するテキストを'Flutter'に設定します。
23行目: TextAlign.centerを使用してテキストを中央揃えにします。
25-28行目: TextStyleを使用してテキストの色を白、フォントサイズを24ピクセルに設定します。

表示確認

いちの

それでは、表示を確認してみましょ〜

ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

角丸にする方法

概要

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: 100,
            // BoxDecorationを使用してデザインを設定
            decoration: BoxDecoration(
              color: Colors.blue,
              // borderRadiusで角丸を設定
              borderRadius: BorderRadius.circular(20),
            ),
            child: Text(
              'Flutter',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

サンプルコードの解説

15-19行目: ContainerのdecorationプロパティにBoxDecorationを設定して、背景色や形状などのデザインを定義します。
18行目: BoxDecorationのborderRadiusプロパティを使用して、BorderRadius.circular(20)を設定し、すべての角を20ピクセルの半径で丸くします。

表示確認

いちの

それでは、表示を確認してみましょ〜

Containerを実用的に使用し、カード形式の商品リストを作成する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、Containerの基本実装から角丸にする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。