【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

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

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

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

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

表示確認

いちの

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

【Flutter】Containerの基本実装

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

角丸にする方法

概要

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行目: ContainerdecorationプロパティにBoxDecorationを設定して、背景色や形状などのデザインを定義します。
  • 18行目: BoxDecorationborderRadiusプロパティを使用して、BorderRadius.circular(20)を設定し、すべての角を20ピクセルの半径で丸くします。

表示確認

いちの

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

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

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

まとめ

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

いちの

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (3件)

コメントする

目次