【Dart】表示されている文字を選択した文字に置き換えたい

Question

解決したい課題

「くだもの」と表示されている項目をタップし、BottomSheetから選択したフルーツが「くだもの」から選択したフルーツに置き換わるようにしたい。

現状

選択したフルーツが「くだもの」の下に表示されてしまう。

コード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedItem = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text(
              'くだもの',
              style: TextStyle(
                color: Colors.grey,
              ),),
            onTap: () => _onButtonPressed(),
          ),
          Text(_selectedItem),
          ]
      ),
    );
  }

  void _onButtonPressed() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            color: Color(0xFF737373),
            height: 180,
            child: Container(
              child: _buildBottomNavigationMenu(),
              decoration: BoxDecoration(
                color: Theme.of(context).canvasColor,
                borderRadius: BorderRadius.only(
                  topLeft: const Radius.circular(10),
                  topRight: const Radius.circular(10),
                ),
              ),
            ),
          );
        });
  }

  Column _buildBottomNavigationMenu() {
    return Column(
      children: <Widget>[
        ListTile(
          title: Text('りんご'),
          onTap: () => _selectItem('りんご'),
        ),
        ListTile(
          title: Text('みかん'),
          onTap: () => _selectItem('みかん'),
        ),
        ListTile(
          title: Text('ぶどう'),
          onTap: () => _selectItem('ぶどう'),
        ),
      ],
    );
  }

  void _selectItem(String name) {
    Navigator.pop(context);
    setState(() {
      _selectedItem = name;
    });
  }
}

試したこと

_selectedItem をTextやListTileの階層に入れてみたりしましたがエラーとなってしまいます。
条件分岐式で解決できないか試したりしているのですが、解決できません。

どなたか、アドバイスをよろしくお願いいたします。

追記

replaceAllという方法を知り、試してみましたがエラーとなってしまいました。

  // ignore: non_constant_identifier_names
  String Fruits = 'くだもの';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text(
              'くだもの',
              style: TextStyle(
                color: Colors.grey,
              ),),
            onTap: () => _onButtonPressed(),
          ),
　　　　　　　Fruits.replaceAll('くだもの', _selectedItem);
          ]
      ),
    );
  }

エラー

lib/main.dart:40:53: Error: Expected ']' before this.
            Fruits.replaceAll('くだも�?�', _selectedItem);
                                                    ^
lib/main.dart:40:20: Error: A value of type 'String' can't be assigned to a variable of type 'Widget'.

Answer 1

最初の変数定義の部分で、String _selectedItem = 'くだもの';
としておいて、現在くだものと入力されている部分を、title: Text(_selectedItem)のようにしてみてはいかがでしょうか。

また追記のエラーに関してですが、Fruits.replaceAll('くだもの', _selectedItem);はString型ですので、
children:<Widget>[]の中には入れられません。
children: <Widget>[]の[]の中に入れるのは必ずWidgetですので、Text（Fruits.replaceAll('くだもの', _selectedItem)）のように、StringではなくWidgetを入れましょう。

Comments

[narururu]

ご回答ありがとうございます。kageさん☺

教えていただいた方法で試してみました。わたしのイメージ通りになりました！ありがとうございます！
よろしければもう１つ教えていただけると嬉しいのですが、現在「くだもの」の文字はグレーで表示されており、フルーツを選択後画面に表示される時は黒色に変化させたいです。
kageさんならどのように記述されますでしょうか。

[flutter_labo]

Text(
_selectedItem,
style: TextStyle(
color: _selectedItem == 'くだもの' ? Colors.grey : Colors.black,
),
),

私なら三項演算子を使いますね。
上記の記述は、「もし_selectedItemがくだものだったらgrey、それ以外ならblack」と言う意味です。
三項演算子についてわかりやすい記事があったので貼っておきます。
https://note.com/hatchoutschool/n/n391e40e78912