【Flutter】市松模様を作る方法

image

この記事は、【 可茂IT塾 Advent Calendar 2021 】の13日目の記事です。

塾長がTwitterで市松模様を作っていました。
https://twitter.com/kamo_it_juku/status/1452077314175504385?s=21
いろいろポイントがあったので解説してみたいと思います。
(※なおコードは全く同じではありません)

この記事のポイント

  • MediaQueryを使って端末のサイズを得る
  • for文でWidgetを繰り返す
  • 条件 ? A : B 構文
  • % の使い方

Version

  • Flutter 2.5.2
  • Dart 2.14.3

全体のコード

import 'package:flutter/material.dart';

class MediaQueryPage extends StatefulWidget {
  
  _MediaQueryPage createState() => _MediaQueryPage();
}

class _MediaQueryPage extends State<MediaQueryPage> {
  
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('市松模様の作り方'),
      ),
      body: SingleChildScrollView(
        child: Wrap(
          children: [
            for (var i = 0; i <= 1000; i++)
              Container(
                color: i % 2 == 0 ? Color(0xff25A37E) : Color(0xff261817),
                height: size.width / 5,
                width: size.width / 5,
              ),
          ],
        ),
      ),
    );
  }
}

解説

①MediaQueryを使って端末のサイズを取得する

MediaQueryを使えば、大きさの違う各端末に対応したUIをひとつのコードで組むことができます。
今回は4行目で「端末の大きさのデータが入った、Size型値の定数size」を定義して、定義した定数sizeを使ってContainerのwidthheightを指定しています。

class _CheckeredPatternPage extends State<CheckeredPatternPage> {
  
  Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold( appBar: AppBar( title: Text('市松模様の作り方'), ),
body: Container(
color: Color(0xff25A37E),
width: size.width / 5,
height: size.width / 5,
)
); } }

first

②for文を使ってWidgetを繰り返す

①で作ったContainerをfor文で1000個定義します。
まずContainerをWrapでラップします。画像のようにコードを追加。

class _CheckeredPatternPage extends State<CheckeredPatternPage> {
  
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('市松模様の作り方'),
      ),
body: Wrap(
children: [
Container( color: Color(0xff25A37E), width: size.width / 5, height: size.width / 5, ),
],
)
); } }

Wrapは、子を配置するための十分なスペースがない場合、新たに行・列を作成してレイアウトしてくれる便利なWidgetです。
そうしたら、for文で1000回繰り返しましょう。次の一行を追加。

class _CheckeredPatternPage extends State<CheckeredPatternPage> {
  
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('市松模様の作り方'),
      ),
      body: Wrap(
        children: [
for(var i = 0; i <= 1000; i++)
Container( color: Color(0xff25A37E), width: size.width / 5, height: size.width / 5, ), ], ) ); } }

forループ Containerを1000回繰り返してWrapの中で表示させることができました。

③色を変える

奇数番目と偶数番目で色の指定を変えることによって、市松模様を再現することができます。
このようにコードを変更してください。

class _CheckeredPatternPage extends State<CheckeredPatternPage> {
  
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('市松模様の作り方'),
      ),
      body: Wrap(
        children: [
          for(var i = 0; i <= 1000; i++)
          Container(
color: i % 2 == 0 ? Color(0xff25A37E) : Color(0xff261817),
width: size.width / 5, height: size.width / 5, ), ], ) ); } }

色が交互に指定されました! 色条件指定 ここでは「条件 ? A : B 構文」を使って奇数と偶数で色の指定を分けています。 色条件指定 条件の部分にはbool型の値を返すような条件式が必要です。その部分で今回は%を使って条件を指定しています。
%は割った余りを返す演算子です。今回のように書けば、 i を 2 で割った余りを返してくれます。つまり奇数が偶数かが判別できるようになるので、交互に指定ができるということです。

④スクロール可能にする

今のままだとスクロールできないので、全体をSingleChildScrollViewでラップしてスクロール可能にします。
SingleChildScrollViewは、端末縦サイズを超えたら自動でスクロールするようにしてくれる便利なWidgetです。

class _CheckeredPatternPage extends State<CheckeredPatternPage> {
 
 Widget build(BuildContext context) {
   final Size size = MediaQuery.of(context).size;
   return Scaffold(
     appBar: AppBar(
       title: Text('市松模様の作り方'),
     ),
body: SingleChildScrollView(
child: Wrap( children: [ for(var i = 0; i <= 1000; i++) Container( color: i % 2 == 0 ? Color(0xff25A37E) : Color(0xff261817), width: size.width / 5, height: size.width / 5, ), ], ),
)
); } }

after

さいごに

他の書き方でも再現できるので、今回の記事はひとつの例と思ってください。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (105)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More