Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】CSSみたいに色をカラーコード(#******)で指定する
2020.09.15
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が学べるプログラミングスクールを運営しています。
オンラインで受けられるコースもあるので興味のある方はぜひ見てみてください。
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13