In Flutter,UI has two part, top part and bottom part. Top part need to expand and bottom part has textField and some component

Question

I have overflow error when I use my app in split screen. I want to work in small screen and showing no overflow error. Bottom part can be hide or clip is ok.

import 'package:flutter/material.dart';

import '../components/my_keyboard.dart';

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

  @override
  State<TestScreenThree> createState() => _TestScreenThreeState();
}

class _TestScreenThreeState extends State<TestScreenThree> {
  List<String> test = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  List<String> test2 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          // Top Part
          Expanded(
            child: Container(
              color: Colors.green,
            ),
          ),

          // Bottom Part
          SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  color: Colors.blue,
                ),
                // textField
                const TextField(
                  maxLines: null,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(vertical: 15.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.0),
                      ),
                    ),
                    filled: true,
                    hintText: '. . . . .',
                  ),
                ),
                // myKeyboard
                MyKeyboard(
                  onButtonPressed: (value) {},
                  buttonLabels: const [
                    'a',
                    'b',
                    'c',
                    'd',
                    'e',
                    'f',
                    'g',
                    'h',
                    'i',
                    'j',
                    'k',
                    'l',
                    'm'
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

I tried wrapping SingleChildScrollView and ListView to bottom part. Overflow error still exist. When wrap with Flexible Widget error is gone but UI is shrink for some reason. Top part and bottom part is in Column.