【Flutter】画像をおしゃれに！インスタ風グラデーション画像

  • 2024年5月24日
  • 2024年5月24日
  • 小物
小物

対象者

  • Flutterの基本的な知識を持っている方
  • モバイルアプリ開発に興味がある方
  • デザイン性の高いUIを作成したいと考えている方

はじめに

モバイルアプリ開発に携わっていると、ユーザーインターフェース（UI）のデザインに工夫を凝らすことが重要だと感じる瞬間が多々あるでしょう。特に、Instagramのような視覚的に魅力的なデザインを取り入れたいと考えることはありませんか？そんなときに役立つのが、FlutterのCircleAvatarウィジェットとLinearGradient機能です。この2つの機能を組み合わせることで、簡単におしゃれな円形グラデーション付き画像を作成することができます。この記事を通して、アプリのデザインスキルを一段階引き上げるための具体的なステップを学んでいきましょう。

作成手順

CircleAvatarウィジェットの使用

まずは、画像を丸く表示する方法を見てみましょう。CircleAvatarウィジェットを使うと、簡単に画像を丸く表示することができます。

CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
)

上記のコードでは、radiusプロパティで円の半径を指定し、backgroundImageプロパティで画像のURLを指定しています。

グラデーションのある円の描画

次に、画像の周りにグラデーションのある円を描く方法を説明します。これには、ContainerウィジェットとBoxDecorationを使用します。

Container(
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      colors: [
        Colors.purpleAccent,
        Colors.red,
        Colors.yellowAccent,
      ],
    ),
  ),
  child: const SizedBox(height: 100, width: 100),
)

このコードは、グラデーションを適用した円形のコンテナを作成します。BoxDecorationを使用して、円形にし、グラデーションの効果を適用します。

Containerの設定

  • decoration: BoxDecorationオブジェクトを使用して、コンテナの装飾を設定します。

BoxDecorationの設定

  • shape: BoxShape.circleを指定して、コンテナを円形にします。
  • gradient: LinearGradientを使用して、グラデーションを設定します。
    • begin: グラデーションの開始位置を指定します。ここでは、Alignment.topRightを指定して、右上からグラデーションを開始します。
    • end: グラデーションの終了位置を指定します。ここでは、Alignment.bottomLeftを指定して、左下でグラデーションを終了します。
    • colors: グラデーションに使用する色のリストを指定します。ここでは、Colors.purpleAccent, Colors.red, Colors.yellowAccentの3色を指定しています。

グラデーションのある円に画像を描画

最後に、上記の二つを組み合わせて、グラデーションのある円の中に画像を表示しています。

Container(
  padding: const EdgeInsets.all(8),
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      colors: [
        Colors.purpleAccent,
        Colors.red,
        Colors.yellowAccent,
      ],
    ),
  ),
  child: CircleAvatar(
    radius: 50,
    backgroundImage: NetworkImage(
        'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
  ),
),

このコードは、グラデーションのある円形のコンテナの中に画像を丸く表示するCircleAvatarウィジェットを配置するものです。

Containerの設定

  • padding: コンテナ内の余白を設定します。ここでは、8ピクセルの余白を指定しています。0ピクセルだとchildと同じ大きさになるので、円が表示されません。そこでpaddingをつけることでchildより大きくなり、円の周りに指定分のグラデーションサークルができます。

参考

まとめ

以上で、Flutterを使用してインスタグラム風のグラデーションサークル付き画像を作成する方法を説明しました。CircleAvatarウィジェットとContainer、BoxDecorationを組み合わせることで、簡単に美しいグラデーション効果を持つ円形の画像を作成することができます。

この記事が皆さんのFlutter開発に役立つことを願っています。興味のある方は、ぜひ自身のプロジェクトで試してみてください。

完全なソースコード

以下に、上記の説明を反映した完全なソースコードを示します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          CircleAvatar(
            radius: 50,
            backgroundImage: NetworkImage(
                'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
          ),
          Container(
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
                  Colors.purpleAccent,
                  Colors.red,
                  Colors.yellowAccent,
                ],
              ),
            ),
            child: const SizedBox(height: 100, width: 100),
          ),
          Container(
            padding: const EdgeInsets.all(8),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
                  Colors.purpleAccent,
                  Colors.red,
                  Colors.yellowAccent,
                ],
              ),
            ),
            child: CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage(
                  'https://flutter.salon/wp-content/uploads/2021/11/IMGP7872.jpg'),
            ),
          ),
        ],
      ),
    );
  }
}