0

I am using the date picker but it's showing a strange overflow text-overflow error.

enter image description here

I know the date picker uses the app Theme to style. But don't know which Theme property is used to style what in the dialogue box.

my Date picker:-

 showDatePicker(
    ontext: context,
    initialDate: DateTime.now(),
    firstDate: DateTime.now(),
     astDate:  DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
  );

my App Theme:-

ThemeData(
primaryColor: Color(0xffE6F5F1),
accentColor: Color(0xFF4EB799),
visualDensity: VisualDensity.adaptivePlatformDensity,
scaffoldBackgroundColor: Colors.white,
textTheme: TextTheme(
  headline2: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 96,
    letterSpacing: -1.5,
    fontFamily: "Muli",
  ),
  headline3: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 60,
    letterSpacing: -0.5,
    fontFamily: "Muli",
  ),
  headline4: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 48,
    letterSpacing: 0,
    fontFamily: "Muli",
  ),
  headline5: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 34,
    letterSpacing: 0.25,
    fontFamily: "Muli",
  ),
  subtitle1: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 24,
    letterSpacing: 0,
    fontFamily: "Muli",
  ),
  headline6: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 20,
    letterSpacing: 0.15,
    fontFamily: "Muli",
  ),
  subtitle2: const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 18,
    letterSpacing: 0.15,
    fontFamily: "Muli",
  ),
  bodyText2: const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 16,
    letterSpacing: 0.5,
    fontFamily: "Muli",
  ),
  bodyText1: const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 14,
    letterSpacing: 0.25,
    fontFamily: "Muli",
  ),
  button: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 14,
    letterSpacing: 1.25,
    fontFamily: "Muli",
  ),
  caption: const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 12,
    letterSpacing: 0.4,
    fontFamily: "Muli",
  ),
  overline: const TextStyle(
    fontWeight: FontWeight.w500,
    fontSize: 10,
    letterSpacing: 1.5,
    fontFamily: "Muli",
  ),
),
);

What is wrong here, which theme property to style what in Date picker in flutter?

1
  • I think you need to decrease the fontSize in headline. Commented Sep 13, 2020 at 17:29

1 Answer 1

1

In source code date_picker_dialog.dart
landscape mode use headline5
portrait mode use headline4

final TextStyle dateStyle = orientation == Orientation.landscape
      ? textTheme.headline5?.copyWith(color: dateColor)
      : textTheme.headline4?.copyWith(color: dateColor);

...
final Widget header = DatePickerHeader(
      helpText: widget.helpText ?? localizations.datePickerHelpText,
      titleText: dateText,
      titleStyle: dateStyle,
      orientation: orientation,
      isShort: orientation == Orientation.landscape,
      icon: entryModeIcon,
      iconTooltip: entryModeTooltip,
      onIconPressed: _handleEntryModeToggle,
    );

working demo

enter image description here

full code reduce headline4 font size

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(
        primaryColor: Color(0xffE6F5F1),
        accentColor: Color(0xFF4EB799),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        scaffoldBackgroundColor: Colors.white,
        textTheme: TextTheme(
          headline2: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 96,
            letterSpacing: -1.5,
            fontFamily: "Muli",
          ),
          headline3: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 60,
            letterSpacing: -0.5,
            fontFamily: "Muli",
          ),
          headline4: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 30,
            letterSpacing: 0,
            fontFamily: "Muli",
          ),
          headline5: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 34,
            letterSpacing: 0.25,
            fontFamily: "Muli",
          ),
          subtitle1: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 24,
            letterSpacing: 0,
            fontFamily: "Muli",
          ),
          headline6: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 20,
            letterSpacing: 0.15,
            fontFamily: "Muli",
          ),
          subtitle2: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 18,
            letterSpacing: 0.15,
            fontFamily: "Muli",
          ),
          bodyText2: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 16,
            letterSpacing: 0.5,
            fontFamily: "Muli",
          ),
          bodyText1: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 14,
            letterSpacing: 0.25,
            fontFamily: "Muli",
          ),
          button: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 14,
            letterSpacing: 1.25,
            fontFamily: "Muli",
          ),
          caption: const TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 12,
            letterSpacing: 0.4,
            fontFamily: "Muli",
          ),
          overline: const TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: 10,
            letterSpacing: 1.5,
            fontFamily: "Muli",
          ),
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime.now(),
      lastDate:  DateTime.utc(2100, DateTime.now().month, DateTime.now().day),
    );

    setState(() {      
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(       
        child: Column(         
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.