flutter如何覆盖第三方组件样式?

Question

flutter如何覆盖第三方组件样式?

比如我现在这个tdesign的ui库的底部弹框的标题文字大小设置小一点，但是我看ui库文档api并没有,
那我如何跟vue一样能v-deep这样强制改变呢

Answer 1

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      titleLarge: TextStyle(fontSize: 16), 
    ),
  ),
  // ...
)

或者自定义：

class CustomTDPopupBottomDisplayPanel extends StatelessWidget {
  final Widget child;
  final String title;
  
  const CustomTDPopupBottomDisplayPanel({
    Key? key, 
    required this.child,
    required this.title,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return TDPopupBottomDisplayPanel(
      backgroundColor: Utils.getColor(context),
      titleColor: Colors.white,
      closeColor: AppColors.primaryColor,
      // 不使用原始标题
      title: "",
      radius: 8,
      titleLeft: true,
      closeClick: () {
        Navigator.maybePop(context);
      },
      // 在child中添加自定义标题
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 16, top: 16, bottom: 8),
            child: Text(
              title,
              style: TextStyle(
                color: Colors.white,
                fontSize: 14, // 自定义字体大小
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          child,
        ],
      ),
    );
  }
}

Answer 2

没有过tdesign的ui库，这里可以通过自定义实现

1. 使用flutter自带的bootomSheet弹框实现弹出效果
2. 弹框中的内容中title 和 close 效果；这个可以通过AppBar实现

其他

1.像tdesign的ui这样的Ui库如果真的没有修改的属性可以尝试下面这种方法。。TDTheme.of(context).copyWith...或者Theme.of(context).copyWith...

@override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        textTheme: Theme.of(context).textTheme.copyWith(
              titleLarge: TextStyle(
                fontSize: 24,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
              ),
            ),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text("修改后的 AppBar 标题"),
        ),
        body: Center(
          child: Text(
            "正文内容",
            style: Theme.of(context).textTheme.bodyLarge, 
          ),
        ),
      ),
    );
  }

使用copyWith方法能够在保证其他属性不变的情况下，只改变你想改的内容；通过Theme包含子组件又能在覆盖子组件的部分样式而不影响全局的；这是flutter一种机制；