Random Color ListView & GridView

Tips💡

最近、コードを書いてロジックを作れる用になってきたけど、美しいデザインが作れない💦
そんなお悩み持ってる人おりませんか？

この記事で紹介する内容が美しいかはわかりませんが....

😫そもそもどうやってセンスを磨くのか

簡単です。自分の頭で考えないことです。いきなりできません。
なので、デザインの本を見て、色の彩度、明度、フォント、オブジェクトの配置について研究してみましょう。

書籍やデザインが紹介されているサイトが良いですね。自分で自作せずに、イラストの画像を入れるだけでも、UI/UXは良くなります。

👁️こちらをよく見る

pinterest
現場のプロがわかりやすく教えるUI/UXデザイナー養成講座

🎨ランダムなカラーを表示してみる

ときどき海外のサイトで見かけるFlutterアプリのデザインで、色が複数表示されているGridViewを見かけます。作ってみたいな〜と思い試しにやってみました🔥

Figmaで、デザインしたUIから、１６進の色を取得します。

１６新数の色を定義したクラスを使って、ランダムな色を表示するListViewを作ってみました。

import 'dart:math';

import 'package:flutter/material.dart';

/// [16進数で色を定義したクラス]
class AppColor {
  // 8DA4F7
  static const Color primaryColor = Color(0xFF8DA4F7);
  // F2DC17
  static const Color secondaryColor = Color(0xFFF2DC17);
  // 3BE288
  static const Color accentColor = Color(0xFF3BE288);
  // ED5656
  static const Color errorColor = Color(0xFFED5656);
  // 524B4B
  static const Color darkColor = Color(0xFF524B4B);
  // 667EB5
  static const Color lightColor = Color(0xFF667EB5);
}

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

  @override
  Widget build(BuildContext context) {
    // AppColorの色をリストに格納
    final colors = <Color>[
      AppColor.primaryColor,
      AppColor.secondaryColor,
      AppColor.accentColor,
      AppColor.errorColor,
      AppColor.darkColor,
      AppColor.lightColor,
    ];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Color List View'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            // ランダムに色を選択
            final randomColor = colors[Random().nextInt(colors.length)];
            return SizedBox(
              width: 330,
              height: 98,
              child: Card(
                color: randomColor, // Cardの背景色にランダムな色を設定
                child: ListTile(
                  title: Text('Item $index'),
                ),
              ),
            );
          },
        ),
      );
  }
}

main.dartで、importしてビルドします。

import 'package:flutter/material.dart';
import 'package:widget_cookbook/listview/color_list_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: const ColorListView(),
    );
  }
}

こんな感じになりました。横側に余白を入れた方がいいですね。今回は割愛します🙇

🟥GridViewの場合

配置横向きにするとこんな感じでございます。

import 'dart:math';

import 'package:flutter/material.dart';

/// [16進数で色を定義したクラス]
class AppColor {
  // 8DA4F7
  static const Color primaryColor = Color(0xFF8DA4F7);
  // F2DC17
  static const Color secondaryColor = Color(0xFFF2DC17);
  // 3BE288
  static const Color accentColor = Color(0xFF3BE288);
  // ED5656
  static const Color errorColor = Color(0xFFED5656);
  // 524B4B
  static const Color darkColor = Color(0xFF524B4B);
  // 667EB5
  static const Color lightColor = Color(0xFF667EB5);
}

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

  @override
  Widget build(BuildContext context) {
    // AppColorの色をリストに格納
    final colors = <Color>[
      AppColor.primaryColor,
      AppColor.secondaryColor,
      AppColor.accentColor,
      AppColor.errorColor,
      AppColor.darkColor,
      AppColor.lightColor,
    ];

    return Scaffold(
        appBar: AppBar(
          title: const Text('Color List View'),
        ),
        // GridView.builderでRandom Colorをを作成
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemCount: 100,
          itemBuilder: (context, index) {
            final color = colors[Random().nextInt(colors.length)];
            return Container(
              color: color,
              margin: const EdgeInsets.all(8),
              child: Center(
                child: Text(
                  '${index + 1}',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              )
            );
          },
        )
      );
  }
}

main.dartを修正してビルドしてみましょう。

import 'package:flutter/material.dart';
import 'package:widget_cookbook/listview/color_list_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: const ColorGridView(),
    );
  }
}

まとめ

ランダムな１６新数が格納されたリストを作成して、ListView, GridViewで使ってみました。いつも白とかグレーばかりの人いたらモチベーション下がるでしょう。是非是非少しで良いので、デザインにこだわると、開発が楽しくなります。