Flutter開発入門8 主要なWidgetについて

Daichi Mizuno

3か月前

はじめに

　Flutterは、UIを構築するための非常に柔軟なフレームワークで、数多くのWidgetが提供されています。これらのWidgetを理解し使いこなすことで、魅力的なUIを簡単に作成することができます。本記事では、Flutterでよく使用される主要なWidgetについて、サンプルコードとともに解説します。Flutter開発入門の前回の記事はこちら。

Text
Image
Button
Container
Card
Column & Row
ListView
AppBar
Scaffold
まとめ

Text

　Textは、文字列を表示するためのシンプルなWidgetです。フォントスタイル、色、大きさなどを指定して、テキストをカスタマイズすることができます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Text Widget'),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

　この例では、Text Widgetを使用して「Hello, Flutter!」というテキストを青色で表示しています。styleプロパティを使って、フォントサイズや色をカスタマイズしています。

Image

　Imageは、画像を表示するためのWidgetです。ネットワーク画像、ローカル画像、アセット画像を表示することができます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Image Widget'),
        ),
        body: Center(
          child: Image.network(
            'https://techgrowup.net/wp-content/uploads/2021/05/site-mobile-header-logo.png',
            width: 300,
            height: 200,
          ),
        ),
      ),
    );
  }
}

　この例では、Image.networkを使用して、ネットワーク上の画像を表示しています。widthやheightプロパティを使って、画像のサイズを指定しています。

Button

　Buttonは、ユーザーの操作を受け付けるためのインタラクティブなWidgetです。Flutterにはいくつかのボタンタイプがありますが、ここでは一般的なElevatedButtonを紹介します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Button Widget'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: const Text('Press Button'),
          ),
        ),
      ),
    );
  }
}

　この例では、ElevatedButtonを使用して「Press Me」というテキストが表示されたボタンを作成しています。onPressedプロパティにコールバックを指定し、ボタンが押されたときに動作するコードを定義します。

Container

　Containerは、レイアウトや装飾を行うための多機能なWidgetです。サイズ、パディング、マージン、色、ボーダー、シャドウなどを設定できます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Container Widget'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Center(
              child: Text(
                'Hello!',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

　この例では、Containerを使用して青色のボックスを作成し、その中にテキストを中央配置しています。padding、margin、BoxDecorationプロパティを使用してレイアウトと装飾を行っています。

Card

　Cardは、カードスタイルのUI要素を作成するためのWidgetです。マテリアルデザインに基づいており、影や角の丸みなどの装飾が適用されます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Card Widget'),
        ),
        body: Center(
          child: Card(
            elevation: 5,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            child: Container(
              width: 300,
              height: 150,
              padding: const EdgeInsets.all(20),
              child: const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Card タイトル', style: TextStyle(fontSize: 24)),
                  SizedBox(height: 10),
                  Text('ここはカード情報の記述です.'),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

　この例では、Card Widgetを使用して、タイトルと説明テキストを持つカードスタイルのUIを作成しています。elevationで影の深さを指定し、shapeで角の丸みを設定しています。

Column & Row

　ColumnとRowは、複数のWidgetを縦または横に並べるためのレイアウトWidgetです。MainAxisAlignmentやCrossAxisAlignmentプロパティを使って、子Widgetの配置を調整します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Column & Row Widgets'),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Icon(Icons.star, color: Colors.red, size: 50),
                  Icon(Icons.star, color: Colors.green, size: 50),
                  Icon(Icons.star, color: Colors.blue, size: 50),
                ],
              ),
              SizedBox(height: 20),
              Text('Stars Row', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}

　この例では、ColumnとRowを組み合わせて、縦と横に配置されたUIを構築しています。Rowでアイコンを横に並べ、Columnでその上にテキストを配置しています。

ListView

　ListViewは、スクロール可能なリストを表示するためのWidgetです。複数の子Widgetをリスト形式で並べるのに便利で、動的なリストや長いリストにも対応します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final items = List<String>.generate(100, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter ListView Widget'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

　この例では、ListView.builderを使用して、100個のアイテムを持つリストを作成しています。itemBuilderを使用して、各リスト項目を動的に生成しています。

AppBar

　AppBarは、マテリアルデザインの一部であるトップバーを提供するWidgetです。タイトル、アクションボタン、アイコンなどを簡単に追加できます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter AppBar Widget'),
          actions: [
            IconButton(
              icon: const Icon(Icons.settings),
              onPressed: () {
                print('Settings pressed');
              },
            ),
          ],
        ),
        body: const Center(
          child: Text('AppBar Example'),
        ),
      ),
    );
  }
}

　この例では、AppBarを使用してタイトルと設定アイコンを持つトップバーを作成しています。actionsプロパティを使って、右側にアクションボタンを追加しています。

Scaffold

　Scaffoldは、Flutterのマテリアルデザインの基本的なレイアウト構造を提供するWidgetです。AppBarやDrawer、BottomNavigationBarなどを簡単に追加できます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Scaffold Widget'),
        ),
        body: const Center(
          child: Text('Scaffold Example'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('FAB pressed');
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

　この例では、Scaffoldを使用して基本的なアプリレイアウトを作成しています。AppBar、Body、FloatingActionButtonを簡単に設定でき、Flutterアプリの標準的なUI構成が整います。

まとめ

　これらのFlutter Widgetを理解し使いこなすことで、より洗練されたUIを作成することができます。まずは各Widgetを使ったシンプルなアプリを作成し、その機能と役割を理解するところから始めましょう。

　Flutter開発入門の次の記事はこちらです。