#️⃣
KeyboardにDoneが表示されない？
複数業入力では表示されない？
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.
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);
State<DummyBuy> createState() => _DummyBuyState();
}
class _DummyBuyState extends State<DummyBuy> {
int counter = 0;
void decrement() {
setState(() {
counter--;
});
}
void increment() {
setState(() {
counter++;
});
}
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.
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);
State<DummyBuy> createState() => _DummyBuyState();
}
class _DummyBuyState extends State<DummyBuy> {
int counter = 0;
void decrement() {
setState(() {
counter--;
});
}
void increment() {
setState(() {
counter++;
});
}
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('カートに追加する')),
],
),
),
),
),
);
}
}
まとめ
そもそもフォーカスとはどんな意味か？
わかりやすく言うと、テキストフィールドをタップすると周りの枠が光ることですね。フォーカスが外れると、色が消えて元の状態に戻ることですね。
公式にフォーカスについての解説がありました！
こちらの記事を見ると体型的まとまっていてわかりやすいと思います。
Discussion