スマホ実機でTextFieldにフォーカスすると起きるひどい画面ずれ – 開発日記(103)

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    builder: (context, child) => const MyApp(),
  ));
}

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

  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.blueAccent,
          child: Column(
            children: [
              const Spacer(),
              Text(
                'Media query inset vertical ${MediaQuery.of(context).viewInsets.vertical}',
                style: const TextStyle(fontSize: 14, color: Colors.black),
              ),
              Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.vertical),
                child: Container(
                  padding: const EdgeInsets.all(16),
                  color: Colors.indigo,
                  child: TextField(
                    controller: TextEditingController(),
                    focusNode: FocusNode(),
                    style: const TextStyle(fontSize: 14, color: Colors.black),
                    cursorColor: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}