Theming and text
How do I theme an app?
Out of the box, Flutter comes with a beautiful implementation of Material Design, which takes care of a lot of styling and theming needs that you would typically do.
To take full advantage of Material Components in your app, declare a top-level widget, MaterialApp, as the entry point to your application. MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design. It builds upon a WidgetsApp by adding Material specific functionality.
But Flutter is flexible and expressive enough to implement any design language. On iOS, you can use the Cupertino library to produce an interface that adheres to the Human Interface Guidelines. For the full set of these widgets, see the Cupertino widgets gallery.
You can also use a WidgetApp
as your app widget, which provides some of the same functionality, but is not as rich as MaterialApp
.
To customize the colors and styles of any child components, pass a ThemeData
object to the MaterialApp
widget. For example, in the code below, the primary swatch is set to blue and text selection color is red.
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
textSelectionColor: Colors.red
),
home: SampleAppPage(),
);
}
}
How do I set custom fonts on my Text widgets?
In iOS, you import any ttf
font files into your project and create a reference in the info.plist
file. In Flutter, place the font file in a folder and reference it in the pubspec.yaml
file, similar to how you import images.
fonts:
- family: MyCustomFont
fonts:
- asset: fonts/MyCustomFont.ttf
- style: italic
Then assign the font to your Text
widget:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(
child: Text(
'This is a custom font text',
style: TextStyle(fontFamily: 'MyCustomFont'),
),
),
);
}
How do I style my Text widgets?
Along with fonts, you can customize other styling elements on a Text
widget. The style parameter of a Text
widget takes a TextStyle
object, where you can customize many parameters, such as:
-
color
-
decoration
-
decorationColor
-
decorationStyle
-
fontFamily
-
fontSize
-
fontStyle
-
fontWeight
-
hashCode
-
height
-
inherit
-
letterSpacing
-
textBaseline
-
wordSpacing