🧏‍♂️

グラデーションに入門してみた!

2023/01/06に公開

Flutter

tech

UI/UXデザインに興味がある

最近、新たな個人アプリを作成することになりまして、今回はUI/UXデザインを導入しようと思っていて、今まで使ったことない、グラデーションを勉強してみました。

こちらのわかりやすいサイトを参考にまずは、作ってみました!

main.dart

import 'package:flutter/material.dart';
import 'package:ui_sample/ui/home_page.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //debug iconを表示.
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

ui/home_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // ScaffoldをContainerでラップする.
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            // グラデーションの色を設定.
            Colors.blue, // 上の色.
            Colors.green, // 真ん中の色.
            Colors.red, // 下の色
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Text(
            'test',
            style: TextStyle(color: Colors.white, fontSize: 50),
          ),
        ),
      ),
    );
  }
}

あらまあ、美しい背景ができましたね!

色はいくつも追加できるみたいで、今度はモノトーンカラーを作成してみました。

ui/home_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // ScaffoldをContainerでラップする.
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            // グラデーションの色を設定.
            Colors.black12,
            Colors.white24,
            Colors.black38,
            Colors.white70,
            Colors.black54,
            Colors.white24,
            Colors.black87,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Text(
            'test',
            style: TextStyle(color: Colors.white, fontSize: 50),
          ),
        ),
      ),
    );
  }
}

自分でグラデーション考えるのは難しいですが、自動生成してくれる便利なサービスがありました!
こちらで、16真数のコードをコピーして、Flutterに設定すればカスタマイズが簡単にできて、美しいUIが作れます🤩
でも、３色使えばいい感じのグラデーションにはなるようですね😅

https://www.grabient.com/
Flutterのグラデーションコードを自動生成してくれるサービスを見つけたのですが、Flutterのコードを生成できているとは、思えないものでしたね😇
コードを修正すれば使えました!
https://fluttergradientgenerator.com/

半角スペースが入っている中途半端なコードが生成される!

LinearGradient(
          colors: [ColorSwatch(primary value: Color(0xff4caf50)), ColorSwatch(primary value: Color(0xff009688))],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        )

色をクリックすると16真数が表示されるので、#の後の数字だけコピーしてFlutterのColor（）に設定します。

Color(0x)// 0xの後に16真数のコードをコピー＆ペーストする.
Color(0x4158D0)// こんな感じになります.

こちらのコードですが、Color()は、２個だとグラデーションを作れるようですが、3個だと、真っ暗になってしまうようです!

ui/home_page

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      // ScaffoldをContainerでラップする.
      decoration: const BoxDecoration(
          gradient: LinearGradient(
        colors: [Color(0x4158D0), Color(0xff009688)],
        begin: Alignment.topLeft, // 左上を設定.
        end: Alignment.bottomRight, // 右下を設定.
      )),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Text(
            'test',
            style: TextStyle(color: Colors.white, fontSize: 50),
          ),
        ),
      ),
    );
  }
}

こんな色ができました!

感想

美しいデザインを作ったことがなかったので、やってみたら面白かったので今後は使っていこうかなと思いました!
UI/UXデザイン面白いですよ!
昨日の夜中からUI/UXデザインの本を読んで、デザインってなんだろうと夢中になって勉強してました!
みなさんも良きFlutterライフを送ってください!

UI/UXデザインに興味がある

感想

Discussion