【Flutter/Dart】if文/if-else文/else-if文/演算子を使う条件文/の使い方/基礎から実践

最終更新日

Dartの基本文であるif文について調べてまとめました。基礎から実践までサンプルがあります。動かない場合はコメントください。

if文とは

公式サイト

https://dart.dev/guides/language/language-tour#control-flow-statements

条件式の真偽によって処理を変えることができる制御文です。

制御文には他に

  • for
  • while
  • switch
  • try

があります。

if文

括弧の中の条件式の真偽を確かめることができます。

サンプル①

numが1のとき、trueを出力させています。

if-else文

括弧の中の条件式の真偽を確かめることができます。もし、条件から外れる場合、二段目の文の処理に移行します。

サンプル①

numが3のときtrue、違うときfalseを出力させています。

else-if文

括弧の中の条件式の真偽を確かめることができます。もし、条件から外れる場合、二段目の文の処理に移行します。それでも合わない場合は、よりしたの条件文を試します。

else-if文を使用することにより複数の条件の真偽を確かめることができます。(if-else文だけではカバーできないところまでカバーしてくれて便利です。)

サンプル①

void main() {
  int number = 3;
  if (number >= 10) {
    print('10以上');
  } else if (number >= 5) {
    print('5以上');
  } else if (number >= 0) {
    print('0以上');
  }
  else {
    print('0より下');
  }
}

演算子を使う条件文

三項演算子を使うことで条件文を一文でまとめて書くことができます。どちらを使っても結果は同じです。

※プロは少しでも文を少しでも短く書くために三項演算子を使うそうです。

(条件)?(trueのときの処理):(falseのときの処理);

公式サイト

https://dart.dev/guides/language/language-tour#conditional-expressions

サンプル①

void main() {
  int num = 8;
  (num >= 5) ? print('5以上') : print('5より下'); 
}

実践

Flutterで、基本文を使うときの注意点をまとめています。こちらをご覧ください。

サンプル①

ボタンを押したら表示が変わるアプリのソースコードです。これにifelseを使用しています。

サンプル②

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'if文 Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {

  const MyStatelessWidget({Key? key}) : super(key: key);



  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();

    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: <Widget>[
        Center(
        child: _number(),

        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        )
      ],
    );
  }
}

Widget _number() {
  if(true){
    return Text(
          'Hello',
          style: TextStyle(fontSize: 12),
    );}
}

サンプル③

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'if文 Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {

  const MyStatelessWidget({Key? key}) : super(key: key);



  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();

    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: <Widget>[
        Center(
        child: _number(),

        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        )
      ],
    );
  }
}

Widget _number() {
  if(false){
    return Text(
          'Hello',
          style: TextStyle(fontSize:20 ),
    );}
  else{
    return Text(
        'Hello',
        style: TextStyle(fontSize:20 ),);
  }
}

参考

https://flutternyumon.com/how-to-use-condition/

https://www.cresc.co.jp/tech/java/Google_Dart2/language/operators/operators.html

fem