【Flutter】Widgetをif・forで表示

if, else if, else(条件分岐)

使い方

if(条件1)...{
  表示したいWideget
} 
else if(条件2)...{
  表示したいWideget
}
else...{
  表示したいWideget
},

とすれば、Widgetを表示にif文を適用できます。

サンプルコード

デモのカウントアップを少し変更して、カウントを3で割ったときの余りで場合分けするようにしました。

import 'package:flutter/material.dart';

// aによって表示が変わる
int a = 6;

void main() {

  final app = MaterialApp(
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyApp(),
  );

  runApp(app);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$a',
              style: Theme.of(context).textTheme.headlineMedium,
            ),

            if(a % 3 == 0)...{
              const Text('aは3の倍数'),
            } 
            else if(a % 3 == 1)...{
              const Text('a % 3 == 1'),
            }
            else...{
              const Text('a % 3 == 2'),
            },
          ],
        ),
      ),
    );
  }
}

実行結果

for文(繰り返し)

概要

for(int i=0;i<n;i++)...{
  表示したいWidget
}

とすれば、指定したWidgetをfor文で繰り返し表示できます。

サンプルコード

テキストを3つ並べて表示します。

import 'package:flutter/material.dart';

void main() {

  final app = MaterialApp(
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: const MyApp(),
  );

  runApp(app);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:  Center(
        child: Column(
          children: <Widget>[
            for(int i=0;i<3;i++)...{
              Text('Text$i'),
            }
          ],
        ),
      ),
    );
  }
}

実行結果