如何更改材质按钮的字体大小...有更好的方法吗？
new MaterialButton(
height: 140.0,
minWidth: double.infinity,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text("material button"),
onPressed: () => {},
splashColor: Colors.redAccent,
),
【问题讨论】：
MaterialButton 吗？
Link(
uri: Uri.parse(
'https://google.com/'),
target: LinkTarget.blank,
builder: (ctx, openLink) {
return TextButton.icon(
onPressed: openLink,
label: const Text('Google'),
icon: const Text(''),
);
},
),
**Blockquote**
【讨论】：
1) 像 Flutter 新手一样内联设置随机字体大小
Text('item ${++index}', style: TextStyle(
color: Colors.green,
fontSize: 32)
2) 使用来自 Apps Material Theme 的预定义字体大小
这是一个更好的方法。这样你就可以在一个地方定义字体大小，它会自动应用到你的整个应用程序中。
Text('item ${++index}', style: TextStyle(
color: Colors.green,
fontSize: Theme
.of(context)
.textTheme
.headline1?.fontSize?? 32
)
定义全局主题类：
import 'package:flutter/material.dart';
// Global Theme For App
class AppTheme {
ThemeData buildThemeData() {
return ThemeData(
// Global Color Style
primarySwatch: Colors.blueGrey,
primaryColor: Colors.blueGrey[800],
accentColor: Colors.tealAccent,
// Global Text Style
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 72.0,
fontWeight: FontWeight.bold,
fontFamily: 'Cutive',
),
headline6: TextStyle(fontSize: 36.0),
bodyText2: TextStyle(fontSize: 14.0),
));
}
}
现在在 App 的入口点应用它：
import 'package:flutter/material.dart';
import 'theme.dart';
import './widgets/home.dart';
void main() {
runApp(MainApp());
}
// This widget is the root of your application.
class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: AppTheme().buildThemeData(),
home: MyStatelessWidget(),
);
}
}
我使用的第三种方法是定义我将无论如何都用于标题、标签等的组件并重用它们
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class Header extends StatelessWidget {
Header({
required this.title,
});
final String title;
@override
Widget build(BuildContext context) {
return Text(
title,
style: TextStyle(
fontSize: 32,
foreground: Paint()
..shader = ui.Gradient.linear(
const Offset(0, 10),
const Offset(40, 20),
<Color>[
Colors.red,
Colors.blue,
],
)),
);
}
}
这种方式在所有小部件中设置标题减少到 1 行：
Header(title: "Hello World"),
【讨论】：
使用ThemeData，可以全局设置按钮的文本属性：
const ColorScheme _scheme = ColorScheme.light();
const Color _primaryColor = TranscarentColors.primary;
final ThemeData theme = ThemeData(
primaryColor: _primaryColor,
textTheme: const TextTheme(
button: TextStyle(
color: Colors.white,
),
),
buttonTheme: const ButtonThemeData(
height: 140.0,
minWidth: double.infinity,
colorScheme: _scheme,
splashColor: Colors.redAccent,
buttonColor: _primaryColor,
textTheme: ButtonTextTheme.primary,
),
);
...可以作为参数传递给MaterialApp()
【讨论】：
TextStyle & fontSize
https://api.flutter.dev/flutter/painting/TextStyle-class.html
https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html
fontSize 默认为 14 个逻辑像素，双倍
final double fontSize;
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: StateApp(),
home: Scaffold(
appBar: AppBar(
title: Text("appbar"),
backgroundColor: Colors.blueAccent[700],
),
body: Center(
child: StateApp(),
),
),
);
}
}
class StateApp extends StatefulWidget {
StateApp();
@override
createState() => _StateAppState();
}
class _StateAppState extends State<StateApp> {
int _counter = 0;
_updateCounter() => setState(() {
_counter++;
});
// _updateCounter() {
// setState(() {
// _counter++;
// });
// }
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(23.0),// double
child: Text(
'You have pushed the button this many times:',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,// double
),
),
),
Center(
child: Text(
'$_counter',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 23.0,// double
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// _counter++;
print("clicked = $_counter");
// setState(() {
// _counter++;
// });
_updateCounter();
},
child: Icon(Icons.add),
),
);
}
}
【讨论】：
Flutter 中的小部件架构使这变得非常简单：MaterialButton 的子小部件是 Text 小部件，可以使用其 style 属性设置样式：
new MaterialButton(
height: 140.0,
minWidth: double.infinity,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
child: new Text(
"material button",
style: new TextStyle(
fontSize: 20.0,
color: Colors.yellow,
),
),
onPressed: () => {},
splashColor: Colors.redAccent,
);
【讨论】：
您可以使用style attribute of your Text widget。
MaterialButton(
...
child: Text(
'material button',
style: TextStyle(
fontSize: 20.0, // insert your font size here
),
),
)
【讨论】：