【Flutter】TextFieldに文字が反映されない

Question

解決したい課題

TextFieldに文字を反映させたい。

現状

TextFileの下に表示されてしまう。

コード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'narururu',
      home: HomePage()
    );
  }
}

class HomePage extends StatefulWidget {
  HomePageState createState() => HomePageState();
}
class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

class HomePageState extends State<HomePage> {

  DateTime _date = new DateTime.now();
  String Calendar;

  Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: _date, 
        firstDate: new DateTime(2000),
        lastDate: new DateTime(2100),
    );
    if(picked != null) setState(() => _date = picked);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('テスト'),
      ),
      body: ListView(
          children: <Widget>[
            ListTile(
              title:
                  TextFormField(
                    focusNode: AlwaysDisabledFocusNode(),
                    onTap: () => _selectDate(context),
                    decoration: InputDecoration(
                      hintText: 'ここに日付を表示させたい',
                    ),

                  ),
              ),
            Row(
              children: [
                Text(_date.year.toString() + '年',),
                Text(_date.month.toString() + '月',),
                Text(_date.day.toString() + '日',),
              ],
            ),
            ]
           )
    );
     }
}

色々試していますが、どうしてもTextFieldに文字が反映されません。
解決策を教えていただけないでしょうか。
よろしくお願いいたします。

Answer 1

こんな感じだと思います！
基本的にTextFieldに表示される文字は、TextEditingControllerで管理できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'narururu', home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  HomePageState createState() => HomePageState();
}

class AlwaysDisabledFocusNode extends FocusNode {
  @override
  bool get hasFocus => false;
}

class HomePageState extends State<HomePage> {
  DateTime _date = new DateTime.now();

  final dateController = TextEditingController();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2000),
      lastDate: new DateTime(2100),
    );
    if (picked != null)
      setState(() => dateController.text =
          '${picked.year}年${picked.month}月${picked.day}日');
  }

  @override
  void dispose() {
    dateController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('テスト'),
        ),
        body: ListView(children: <Widget>[
          ListTile(
            title: TextFormField(
              controller: dateController,
              onTap: () {
                _selectDate(context);
              },
              focusNode: AlwaysDisabledFocusNode(),
              decoration: InputDecoration(
                hintText: 'ここに日付を表示させたい',
              ),
            ),
          ),
        ]));
  }
}

Comments

[narururu]

ご回答ありがとうございます！taiso.itsukageさん☺

すごいです。イメージ通りの動作が確認できました????
TextとTextFieldでは記述方法が変わるのですね????
TextEditingControllerの存在、初めて知りました！
またまた勉強になりました！
ご丁寧にアドバイスしていただき助かります。
本当にありがとうございました！