Question

我正在使用日期选择器，但它显示了一个奇怪的溢出文本溢出错误。

我知道日期选择器使用应用程序主题进行样式设置。但是不知道在对话框中使用哪个Theme属性设置样式。

我的日期选择器：-

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

我的应用主题：-

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",
  ),
),
);

这是怎么回事，在主题选择器中如何设置样式的主题属性？

Answer 1

在源代码date_picker_dialog.dart中
landscape模式使用headline5
portrait模式使用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,
    );

工作演示

完整代码可减少headline4字体大小

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),
      ), 
    );
  }
}

颤振日期选择器中的溢出错误？

1 个答案: