【Flutter】キーボード表示時にオーバーフロー【日本語】

Flutterで用意した入力フォームをタップしソフトキーボードが表示された際に、Overflow(オーバーフロー)が発生した場合の解消法をメモ。

※他のプログラミングに関する記事はこちら

 

スポンサーリンク

症状

入力フォームで入力しようとした際にOverflow(オーバーフロー)となる。

 

上記オーバーフローとなってしまうアプリの全コードは以下の通り。

main.dart

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
          children: [
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            TextField(
              enabled: true,
              maxLength: 100,
              style: TextStyle(color: Colors.red),
              maxLines:1,
            ),
          ],
        )
    );
  }
}

スポンサーリンク

原因と解消法

原因は恐らく、ソフトキーボードを表示した際に縦幅が増えて表示領域をはみだしてしまったため。

解消法としては、表示領域がはみでた場合にスクロールされるようにSingleChildScrollViewを使用すれば直る。

 

直したコードは以下の通り(19行目で使用しているSingleChildScrollViewに注目)

main.dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            Text("テスト"),
            TextField(
              enabled: true,
              maxLength: 100,
              style: TextStyle(color: Colors.red),
              maxLines:1,
            ),
          ],
        )
      ),
    );
  }
}

 

結果は以下の通り。

ソフトキーボードを表示してもOverflowとならなくなる。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク