showTimePicker A RenderFlex overflowed by 14 pixels on the bottom when using theme

Question

Hi, i have an issue with the showTimePicker dialog, the dialog bottom is overflowed by 14 pixels.
I think i have done something wrong in ThemeData, when i remove theme the everything works fine.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _red = 0xFFFA2A2A;

  int _white = 0xFFFFFFFF;

  int _black = 0xFF000000;

  @override
  Widget build(BuildContext context) {
   final _light = ThemeData(
      brightness: Brightness.light,
      primaryColorBrightness: Brightness.light,
      scaffoldBackgroundColor: Color(_white),
      backgroundColor: Color(_white),
      primaryColor: Color(_white), 
      primarySwatch: Colors.red,
      accentColor: Color(_red), 
      accentTextTheme: TextTheme(
        headline6: TextStyle(color: Color(_white)),
        subtitle1:
            TextStyle(fontSize: 45.0, letterSpacing: 2, color: Color(_white)),
        bodyText2: TextStyle(color: Color(_white)),
        button: TextStyle(color: Color(_white)),
      ),
      accentIconTheme: const IconThemeData(
        color: Colors.white,
      ),
      primaryTextTheme: TextTheme(
        headline6: TextStyle(color: Color(_black)),
        subtitle1:
            TextStyle(fontSize: 45.0, letterSpacing: 2, color: Color(_black)),
        button: TextStyle(color: Color(_black)),
      ),
      primaryIconTheme: const IconThemeData(
        color: Colors.grey,
      ),    
      textTheme: TextTheme(
        headline5: TextStyle(fontSize: 50.0, letterSpacing: 2),
        headline6: TextStyle(fontSize: 36.0, letterSpacing: 2),
        bodyText2: TextStyle(
          fontSize: 16.0,
        ),
      ),
      buttonColor: Color(_white),
      buttonTheme: ButtonThemeData(
        buttonColor: Color(_red),
        textTheme: ButtonTextTheme.primary,
      ),
      iconTheme: const IconThemeData(
        color: Colors.grey,
      ),
    );

    return MaterialApp(
        theme: _light,//commenting this line works fine
      home: Scaffold(
        body: 
        Align(

          child: Builder(
          builder: (context) => Column(
            children: [
              SizedBox(height: 50,),
              GestureDetector(
                onTap: () {

                },
                child: RaisedButton(child: Text("22:30"),onPressed: ()=>{
                  showTimePicker(
                    context: context,
                    initialTime: const TimeOfDay(hour: 7, minute: 0),
                  )
                },),
              )
            ],
          ),
        ),),
      ),
    );
  }
}

Answer 1

You set large font size in your theme. for example change your theme to:

final _light = ThemeData(
      brightness: Brightness.light,
      primaryColorBrightness: Brightness.light,
      scaffoldBackgroundColor: Color(_white),
      backgroundColor: Color(_white),
      primaryColor: Color(_white), 
      primarySwatch: Colors.red,
      accentColor: Color(_red), 
      accentTextTheme: TextTheme(
        headline6: TextStyle(color: Color(_white)),
        subtitle1:
            TextStyle(fontSize: 22.0, letterSpacing: 2, color: Color(_white)),
        bodyText2: TextStyle(color: Color(_white)),
        button: TextStyle(color: Color(_white)),
      ),
      accentIconTheme: const IconThemeData(
        color: Colors.white,
      ),
      primaryTextTheme: TextTheme(
        headline6: TextStyle(color: Color(_black)),
        subtitle1:
            TextStyle(fontSize: 22.0, letterSpacing: 2, color: Color(_black)),
        button: TextStyle(color: Color(_black)),
      ),
      primaryIconTheme: const IconThemeData(
        color: Colors.grey,
      ),    
      textTheme: TextTheme(
        headline5: TextStyle(fontSize: 20.0, letterSpacing: 2),
        headline6: TextStyle(fontSize: 18.0, letterSpacing: 2),
        bodyText2: TextStyle(
          fontSize: 16.0,
        ),
      ),
      buttonColor: Color(_white),
      buttonTheme: ButtonThemeData(
        buttonColor: Color(_red),
        textTheme: ButtonTextTheme.primary,
      ),
      iconTheme: const IconThemeData(
        color: Colors.grey,
      ),
    );