#️⃣

KeyboardにDoneが表示されない？

JboyHashimoto

2023/02/21に公開

Flutter

unfocus

tech

複数業入力では表示されない？

Flutterでは、Swiftと違って最初からキーボードを閉じる機能があったと思っていたのですが、複数業入力にするとDoneボタンが現れないようです。

問題のコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DummyBuy(),
    );
  }
}

class DummyBuy extends StatefulWidget {
  const DummyBuy({Key? key}) : super(key: key);

  @override
  State<DummyBuy> createState() => _DummyBuyState();
}

class _DummyBuyState extends State<DummyBuy> {
  int counter = 0;

  void decrement() {
    setState(() {
      counter--;
    });
  }

  void increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('予約する'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[
              SizedBox(height: 20),
              Container(
                color: Colors.grey,
                width: 300,
                height: 150,
              ),
              SizedBox(height: 10),
              Container(width: 300, child: Text('ショートケーキ５号')),
              SizedBox(height: 10),
              Container(
                  width: 300,
                  child: Text('直径15cm、４〜６人分です。フルーツがいっぱいのっている贅沢なケーキです。')),
              SizedBox(height: 20),
              Container(
                width: 300,
                child: TextFormField(
                  maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                      hintText:
                          "(例)食物アレルギーでキゥイがダメ、メッセージプレートの内容が、英語でHappy Birthday",
                      border: OutlineInputBorder()),
                ),
              ),
              SizedBox(height: 20),
              Container(
                width: 300,
                child: Row(
                  children: [
                    TextButton(
                        onPressed: () {
                          decrement();
                        },
                        child: const Text('-', style: TextStyle(fontSize: 20))),
                    const SizedBox(width: 10),
                    Text(counter.toString()),
                    const SizedBox(width: 10),
                    TextButton(
                        onPressed: () {
                          increment();
                        },
                        child: const Text('+', style: TextStyle(fontSize: 20))),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(onPressed: () {}, child: const Text('カートに追加する')),
            ],
          ),
        ),
      ),
    );
  }
}

解消する方法

キーボードの外側をタップすると閉じる設定を追加することで解消できました🤩

設定を追加したコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DummyBuy(),
    );
  }
}

class DummyBuy extends StatefulWidget {
  const DummyBuy({Key? key}) : super(key: key);

  @override
  State<DummyBuy> createState() => _DummyBuyState();
}

class _DummyBuyState extends State<DummyBuy> {
  int counter = 0;

  void decrement() {
    setState(() {
      counter--;
    });
  }

  void increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('予約する'),
      ),
      body: SingleChildScrollView(
        /// CenterをGestureDetectorでラップする.
        child: GestureDetector(
          behavior: HitTestBehavior.opaque, //画面外タップを検知するために必要
          onTap: () => FocusScope.of(context).unfocus(),// キーボードを閉じる設定.
          child: Center(
            child: Column(
              children: <Widget>[
                SizedBox(height: 20),
                Container(
                  color: Colors.grey,
                  width: 300,
                  height: 150,
                ),
                SizedBox(height: 10),
                Container(width: 300, child: Text('ショートケーキ５号')),
                SizedBox(height: 10),
                Container(
                    width: 300,
                    child: Text('直径15cm、４〜６人分です。フルーツがいっぱいのっている贅沢なケーキです。')),
                SizedBox(height: 20),
                Container(
                  width: 300,
                  child: TextFormField(
                    maxLines: 5,
                    keyboardType: TextInputType.multiline,
                    decoration: InputDecoration(
                        hintText:
                            "(例)食物アレルギーでキゥイがダメ、メッセージプレートの内容が、英語でHappy Birthday",
                        border: OutlineInputBorder()),
                  ),
                ),
                SizedBox(height: 20),
                Container(
                  width: 300,
                  child: Row(
                    children: [
                      TextButton(
                          onPressed: () {
                            decrement();
                          },
                          child:
                              const Text('-', style: TextStyle(fontSize: 20))),
                      const SizedBox(width: 10),
                      Text(counter.toString()),
                      const SizedBox(width: 10),
                      TextButton(
                          onPressed: () {
                            increment();
                          },
                          child:
                              const Text('+', style: TextStyle(fontSize: 20))),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                ElevatedButton(onPressed: () {}, child: const Text('カートに追加する')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

まとめ

そもそもフォーカスとはどんな意味か？
わかりやすく言うと、テキストフィールドをタップすると周りの枠が光ることですね。フォーカスが外れると、色が消えて元の状態に戻ることですね。
公式にフォーカスについての解説がありました！

こちらの記事を見ると体型的まとまっていてわかりやすいと思います。

Flutter大学Publication

Flutter大学はFlutterエンジニアに特化した学習コミュニティです！初心者から中上級者まで幅広く在籍し、切磋琢磨しています！入会をご希望の方はこちらから→ flutteruniv.com

複数業入力では表示されない？

解消する方法

まとめ

Discussion