サイトアイコン 【TechGrowUp】

Flutter開発入門12 UIスタイリング

Daichi Mizuno

はじめに

　Flutterは、クロスプラットフォームで美しいUIを手軽に作成できるフレームワークです。スタイリングを適切に行うことで、ユーザーにとって魅力的で使いやすいアプリを提供できます。本記事では、FlutterでのUIスタイリングの基本と、そのコツについて解説します。これを理解することで、より洗練されたアプリを構築することができるようになります。

Flutterでのスタイリングの基本

　Flutterでは、TextやContainerなどの基本的なWidgetから、ThemeやCustomPainterを使用してアプリ全体のデザインをカスタマイズすることが可能です。これらを組み合わせることで、柔軟で美しいUIを構築できます。

Textのスタイリング

　Text Widgetを使用すると、テキストのスタイルを簡単にカスタマイズできます。フォントサイズ、色、太字、斜体など、さまざまなプロパティを設定してテキストを魅力的に見せることができます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Styling',
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello, Tech Grow Up!',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

　この例では、テキストを太字、青色、24ピクセルのサイズで表示しています。

Containerのスタイリング

　Containerは、背景色、境界線、パディング、マージンなどを指定して、レイアウトやデザインをコントロールするための基本的なWidgetです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Styling',
      home: Scaffold(
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(16.0),
            margin: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.amber,
              borderRadius: BorderRadius.circular(8),
              boxShadow: const [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 10.0,
                  offset: Offset(0, 5),
                ),
              ],
            ),
            child: const Text(
              'Styled Container',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

　ここでは、Containerの背景色、角の丸み、影を指定し、内側のテキストが引き立つデザインにしています。

テーマのカスタマイズ

　Flutterアプリ全体のスタイルを統一するために、Themeを使用して一貫性のあるデザインを作成することができます。ThemeDataを設定することで、アプリ内のすべてのWidgetに適用されるデフォルトスタイルを定義できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Styling',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: const TextTheme(
          bodyLarge: TextStyle(fontSize: 18, color: Colors.black),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.pink,
            foregroundColor: Colors.white,
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('テキスト', style: Theme.of(context).textTheme.bodyLarge),
              ElevatedButton(
                onPressed: () {},
                style: Theme.of(context).elevatedButtonTheme.style,
                child: const Text('ボタン'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

　このコードでは、ThemeDataを使ってアプリ全体のプライマリカラーやテキストスタイル、ボタンのスタイルを統一しています。

カスタムペインターでのスタイリング

　CustomPainterを使うと、Canvas APIを利用して高度なカスタムデザインを実現できます。これにより、複雑なグラフィックや独自のアニメーションを描画することが可能です。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Styling',
      home: Scaffold(
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            child: CustomPaint(
              painter: MyPainter(),
            ),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    final center = Offset(size.width / 2, size.height / 2);
    canvas.drawCircle(center, 50.0, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

　この例では、赤い円を描画するカスタムペインターを使っています。CustomPainterを利用すると、独自のデザイン要素をアプリに取り入れることができます。

レスポンシブデザイン

　Flutterでは、MediaQueryやLayoutBuilderを使って、デバイスの画面サイズに応じたレスポンシブデザインを実装できます。これにより、異なるデバイスサイズに合わせた最適なレイアウトを提供できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Styling',
      home: Scaffold(
        body: Center(
          child: LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth > 600) {
                return GridView.count(
                  crossAxisCount: 3,
                  children: [/* グリッドアイテム */],
                );
              } else {
                return ListView(
                  children: [/* リストアイテム */],
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

　このコードでは、デバイスの幅に応じてレイアウトを変更しています。画面が広い場合はグリッドビュー、狭い場合はリストビューを表示する仕組みです。

まとめ

　Flutterでは、様々なWidgetやカスタマイズオプションを活用することで、美しく一貫性のあるUIを簡単に実装することができます。スタイリングの基本を理解し、適切に使いこなすことで、ユーザーにとって魅力的なアプリを作り上げることができます。特に、テーマの設定やレスポンシブデザインの実装は、ユーザー体験を向上させるための重要なポイントです。

モバイルバージョンを終了