【Flutter】CSSみたいに色をカラーコード(#******)で指定する

Flutterで色を指定するときは、Colorsを使ったり、RBGで指定することが基本になっています。

今までWEBのフロントエンドの開発をされていた方は、#FFFFFF のようなカラーコード（HexColor）で指定したい方もいると思うので、その方法を紹介します。

コードをコピペ

新しいColorのクラスのコードを任意の箇所にコピペします。

コピペコード

class HexColor extends Color {
 static int _getColorFromHex(String hexColor) {
   hexColor = hexColor.toUpperCase().replaceAll('#', '');
   if (hexColor.length == 6) {
     hexColor = 'FF' + hexColor;
   }
   return int.parse(hexColor, radix: 16);
 }

 HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

あとは、カラーコードを調べて指定するだけです。

HexColor('ff0099'), // HexColorで指定

今回は、main.dart しか使わずに書いてみたので完成形のスクショと一緒に参考にしてください。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Hatchout School',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: TestPage(),
   );
 }
}

class TestPage extends StatefulWidget {
 @override
 _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text('カラーコード', style: TextStyle(fontSize: 21.0),),
         centerTitle: true,
       ),
       body: Container(
         margin: EdgeInsets.all(10.0),
         color: HexColor('ff0099'), // HexColorで指定
         height: double.infinity,
       )
   );
 }
}

class HexColor extends Color {
 static int _getColorFromHex(String hexColor) {
   hexColor = hexColor.toUpperCase().replaceAll('#', '');
   if (hexColor.length == 6) {
     hexColor = 'FF' + hexColor;
   }
   return int.parse(hexColor, radix: 16);
 }

 HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

大阪でFlutterが学べるプログラミングスクールを運営しています。
オンラインで受けられるコースもあるので興味のある方はぜひ見てみてください。

プログラミングで副業！アプリ開発学習 | ONthe UMEDA