chakokuのブログ(rev4)

テック・コミック・DTM・・・ごくまれにチャリ

Flutter勉強中 (基礎編)、カラーサンプル表示アプリ(無限スクロール)

Flutter Guide JPの説明がシンプルで分かりやすく、このところはずっとFlutter Guide JPのコードを打ち込んでいる。Flutterで使える標準カラーをすぐに忘れるので*1、名前と色目を確認できるアプリを作ってみた。へなちょこで、自分の書いたソースでは何の情報も増えないと思うが、、一応ソースは以下。無限にスクロールできる(だからどうした?)

import 'package:flutter/material.dart';

var colorList = [Colors.amber, Colors.amberAccent, Colors.black, Colors.blue, Colors.blueAccent, Colors.blueGrey, Colors.brown, Colors.cyan, Colors.cyanAccent, Colors.deepOrange, Colors.deepOrangeAccent, Colors.deepPurple, Colors.deepPurpleAccent, Colors.green, Colors.greenAccent, Colors.grey, Colors.indigo, Colors.indigoAccent, Colors.lightBlue, Colors.lightBlueAccent, Colors.lightGreen, Colors.lightGreenAccent, Colors.lime, Colors.limeAccent, Colors.orange, Colors.orangeAccent, Colors.pink, Colors.pinkAccent, Colors.purple, Colors.purpleAccent, Colors.red, Colors.redAccent, Colors.teal, Colors.tealAccent, Colors.white, Colors.yellow, Colors.yellowAccent];
	
var colorNameList = ["amber", "amberAccent", "black", "blue", "blueAccent", "blueGrey", "brown", "cyan", "cyanAccent", "deepOrange", "deepOrangeAccent", "deepPurple", "deepPurpleAccent", "green", "greenAccent", "grey", "indigo", "indigoAccent", "lightBlue", "lightBlueAccent", "lightGreen", "lightGreenAccent", "lime", "limeAccent", "orange", "orangeAccent", "pink", "pinkAccent", "purple", "purpleAccent", "red", "redAccent", "teal", "tealAccent", "white", "yellow", "yellowAccent"];

class MyApp extends StatelessWidget {

   @override
   Widget build(BuildContext context) {
      return MaterialApp(
          home: Scaffold(
             body: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount (
                   crossAxisCount: 5,
                   childAspectRatio: (1 / 0.3),
                ),
                itemBuilder: (BuildContext context, int index){
                   var newIndex = index % colorList.length;
                   return _colorSample(colorList[newIndex],colorNameList[newIndex]);
                }
              )
           )
        );
    }
    Widget _colorSample(Color color,String colorName) {
      return Container(
         child: Container(
            color: color,
            child: Text(colorName)
         )
      );
    } 
}

統合開発環境を使うのが手間で、サンプルを量産したいので、エディタ(Emacs)とWebブラウザで動作確認しながら作っています(以下はアスペクト比を指定しない古いバージョンの動作)。

windowsオプション指定でビルドすると、Windows用アプリがビルドできる。

$ flutter build  windows

Windows版動作画面は以下。Flutter凄い

*1:公式サイトを見に行けばいいのだけど