dimiss keyboard flutter คืออะไร

ใน Flutter dismiss keyboard หมายถึง การซ่อนแป้นพิมพ์เสมือนบนหน้าจอ

วิธีการ dismiss keyboard

1. ใช้ FocusNode:

Dart

import 'package:flutter/material.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              focusNode: _focusNode,
            ),
            GestureDetector(
              onTap: () {
                _focusNode.unfocus();
              },
              child: Text('Dismiss Keyboard'),
            ),
          ],
        ),
      ),
    );
  }
}

อธิบาย

• FocusNode : ควบคุมสถานะโฟกัสของ widget
• _focusNode.unfocus() : ซ่อนแป้นพิมพ์

2. ใช้ GestureDetector:

Dart

import 'package:flutter/material.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus();
        },
        child: Text('Dismiss Keyboard'),
      ),
    );
  }
}

อธิบาย

• GestureDetector : ตรวจจับการแตะบนหน้าจอ
• FocusScope.of(context).unfocus() : ซ่อนแป้นพิมพ์

3. ใช้ KeyboardVisibilityBuilder:

Dart

import 'package:flutter/material.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: KeyboardVisibilityBuilder(
        builder: (context, isVisible) {
          if (isVisible) {
            return GestureDetector(
              onTap: () {
                FocusScope.of(context).unfocus();
              },
              child: Text('Dismiss Keyboard'),
            );
          } else {
            return Text('Keyboard is hidden');
          }
        },
      ),
    );
  }
}

อธิบาย

• KeyboardVisibilityBuilder : แสดง widget ที่แตกต่างกันขึ้นอยู่กับว่าแป้นพิมพ์ visible หรือไม่

ตัวอย่าง

Dart

import 'package:flutter/material.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        

แหล่งที่มา

1. sk.wikipedia.org/wiki/Flutter_(softv%C3%A9r)
2. pub.dev/documentation/speech_to_text/latest/
3. uniandes-se4ma.gitlab.io/books/chapter8/flutter-state-matters-simple.html
4. stackoverflow.com/questions/68449865/tab-order-in-flutter
5. github.com/IDBAI/FlutterAnimation
6. tracemycode.com/simple-authentication-flow-in-flutter-using-shared-preferences/
7. pt.stackoverflow.com/questions/372538/como-alterar-a-cor-de-um-icon-atrav%C3%A9s-retorno-booleano-em-flutter
8. medium.com/flutter-community/a-pragmatic-guide-to-buildcontext-in-flutter-b5302aef277c
9. stackoverflow.com/questions/56735073/how-to-keep-the-widgets-state-in-scaffold-drawer-in-flutter
10. stackoverflow.com/questions/61302326/how-to-draw-a-custom-rectangle-with-border-radius-in-flutter