🧏‍♂️

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

2023/01/06に公開約4,500字

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

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

こちらのわかりやすいサイトを参考にまずは、作ってみました!
https://www.choge-blog.com/programming/flutterscreenbackgroundcolorgradient/

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.
  
  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);

  
  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);

  
  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が作れます🤩
でも、3色使えばいい感じのグラデーションにはなるようですね😅

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()は、2個だとグラデーションを作れるようですが、3個だと、真っ暗になってしまうようです!

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

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

  
  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ライフを送ってください!

Discussion

ログインするとコメントできます