Flutterで条件により、表示する文章を変えたい場合、Getterを使います。

今回は、カウンターが0の場合は『プラスボタンをタップしてください:』、1以上の場合は『もっとプラスボタンをタップしてください:』を表示させます。

image2

FlutterでGetterを使用するには、getを設定します。

getでgetterの名前を指定し、中括弧のなかで条件分けします。

class _MyHomePageState extends State<MyHomePage> {

  String get _message {

  }

ifを使い、カウンターが0の場合と、1以上で条件分けします。

String get _message {
  String _messageText;

  if (_counter == 0) {
    _messageText = 'プラスボタンをタップしてください:';
  } else {
    _messageText = 'もっとプラスボタンをタップしてください:';
  }

  return _messageText;
}

_messageを、Textに指定します。

Text(
  _message,
  style: const TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w700,
  ),
),

では、動作確認します。

image3

プラスボタンをタップすると、

image4

『プラスボタンをタップしてください:』から『もっとプラスボタンをタップしてください:』に文章が変わりました。

ブログ一覧