One, foreword
Front-end developers who work regularly with UIs understand that the visual language of any product needs to be consistent. And there are no more than two specifications: font specification & color specification. Generally, 5~10 types of font styles are needed, and there are many color specifications, but generally, at least 5 types are needed, such as:
When we look for the global pattern of the flutter on the Internet, we usually tell you that the MaterialApp has a global Theme Widget preset for you. We can configure ThemeData to customize the global colors and global font styles, and use theme.of (context) to take the defined colors and font styles out of the page.
But this is going to go directly to the Material and set the default style of the control, so let’s look at that.
Two, global color
1, We can atmain.dartWhich defines the global style color,
// main.dart
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xFF3533A4),
accentColor: Color(0xFF346DFC)))Copy the code2, and then to the other page for direct reference
Widget build(BuildContext context) {
final Color primaryColor = Theme.of(context).primaryColor;
final Color accentColor = Theme.of(context).accentColor;
return Column(
children: [
Text('test', style:TextStyle(color:primaryColor)),
Icon(Icons.arrow_drop_down, color: accentColor)
]
)
}
Copy the code
Just like this, any control calls the global color on any page.
However, each property in ThemeData is used to modify the default style for most widgets in the Material
For example, if we want to add a default TabBar to a page, just write it like this
bottom: TabBar(
tabs: ['Chinese'.'English',]
controller: _controller,
),
Copy the code
The TabBar color is also set to the primaryColor, so configuring the default color for ThemeData is not a good choice when you need many default colors
The simplest way
You can define a class in a new file called mystyle. dart and reference it in other files with fewer characters without affecting the control’s default style
// myStyle.dart
class MyColor {
static const Color mainColor = Color(0xFFEA1C1C);
static const Color secondColor = Color(0xFFFDCBC8);
static const Color thirdColor = Color(0xFFFEC650);
static const Color deepBlack = Color(0xFF010211);
static const Color lightBlack = Color(0xFFEA1C1C);
static const Color deepGrey = Color(0xFF65656E);
static const Color lightGrey = Color(0xFFD0D0D2);
}
// Other pages
import 'package:app/utils/myStyle.dart';
Text('test', style:TextStyle(color:MyColor.mainColor)),
Icon(Icons.arrow_drop_down, color: MyColor.secondColor)
Copy the code
3. Global text styles
Global colors can be configured directly via class, and we can also configure global font styles using class
1, directly configure the font
// myStyle.dart
class MyFontSize {
static const int bigTitle = 32;
static const int mainTitle = 26;
static const int subTitle = 22;
static const int content = 16;
static const int annotation = 14;
static const int smallSize = 12;
}
Copy the codeThis is configured so that direct references can be made, but generally in the same location, the size is the same, the color is the same, and the word weight is definitely the same
2. Configure font styles directly
// myStyle.dart
class MyFontStyle {
static const TextStyle bigTitle = TextStyle(color: Colors.black, fontSize: 32, fontWeight: FontWeight.bold);
static const TextStyle mainTitle = TextStyle(color: Colors.black87, fontSize: 26, fontWeight: FontWeight.w600);
static const TextStyle subTitle = TextStyle(color: Colors.black54, fontSize: 22, fontWeight: FontWeight.w400);
static const TextStyle content = TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal);
static const TextStyle annotation = TextStyle(color: Colors.black38, fontSize: 14, fontWeight: FontWeight.normal);
static const TextStyle smallSize = TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.normal);
}
Copy the codeThen there is another problem. For mobile terminal development, it is necessary to add the size adaptively according to the screen. We can use the plugin Flutter_ScreenUtil to complete this work
3, add text size adaptive
We first introduced it in Pubspec. Yaml and now it is the 3.2.0 version of Flutter_ScreenUtil. Many people have written ways to use this plug-in
- Every page using this plugin is required
ScreenUtil.init()again- This plug-in relies on
MediaQuery.of(context)This method, and this method can only be inWeightIn the use of
We can introduce and call it directly from the normal page
import 'package:flutter_screenutil/flutter_screenutil.dart';
Widget build(BuildContext context) {
super.build(context);
ScreenUtil.init(context, designSize: Size(750.1334), allowFontScaling: true);
return Scaffold(
Sp = ScreenUtil().setwidth (32)
body: Text('test', testStyle(fontSize: 32.sp))
)
}
Copy the codeWhen we want to do the following, you will see it when the main.dart page is introduced
// Initialization is complete
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: Size(750.1334), allowFontScaling: true);
return MaterialApp()
}
// Use adaptive values
TextStyle(color: Colors.black, fontSize: 32.sp, fontWeight: FontWeight.bold);
Copy the code
The mediaquery.of () method is called when initializing screenutil.init (). We can’t initialize this method in MaterialApp() on the main.dart page. We can’t use this method without initializing it. We have to go in circles.
Furthermore, 32.sp is equivalent to ScreenUtil().setwidth (32). This method can only be used in MaterialApp(), so it can only be implemented as follows
// Step 1: Create a WidgetsBindingObserver to include MyApp() in
class ScreenApp extends StatefulWidget {
@override
_ScreenAppState createState() => _ScreenAppState();
}
class _ScreenAppState extends State<ScreenApp> with WidgetsBindingObserver {
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, designSize: Size(750.1334), allowFontScaling: true);
returnMyApp(); }}// Step 2: Create a Widget that listens for changes in the APP state and requires a child to be passed in
class MediaQueryFromWindow extends StatefulWidget {
// Requires the page to pass in a child control
const MediaQueryFromWindow({
Key key,
@required this.child,
}): super(key: key);
final Widget child;
@override
_MediaQueryFromWindowState createState() => _MediaQueryFromWindowState();
}
// Listen when the page state changes
class _MediaQueryFromWindowState extends State<MediaQueryFromWindow> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
Widget build(BuildContext context) {
// Create a widget with window data
return MediaQuery(
data: MediaQueryData.fromWindow(WidgetsBinding.instance.window), child: widget.child, ); }}// Step 3: Pass ScreenApp() to MediaQueryFromWindow()
void main() {
return runApp(
MediaQueryFromWindow(child: ScreenApp()),
);
}
// The original page
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'test', home: () ); }}Copy the codeChanging the font style above to this, flutter_Screenutil can only be used in Weight, so
// myStyle.dart
class MyFontStyle extends StatelessWidget {
static const TextStyle bigTitle = TextStyle(color: Colors.black, fontSize: 32.sp, fontWeight: FontWeight.bold);
static const TextStyle mainTitle = TextStyle(color: Colors.black87, fontSize: 26.sp, fontWeight: FontWeight.w600);
static const TextStyle subTitle = TextStyle(color: Colors.black54, fontSize: 22.sp, fontWeight: FontWeight.w400);
static const TextStyle content = TextStyle(color: Colors.black, fontSize: 16.sp, fontWeight: FontWeight.normal);
static const TextStyle annotation = TextStyle(color: Colors.black38, fontSize: 14.sp, fontWeight: FontWeight.normal);
static const TextStyle smallSize = TextStyle(color: Colors.black, fontSize: 12.sp, fontWeight: FontWeight.normal);
@override
Widget build(BuildContext context) {
returnContainer(); }}// Other pages
import 'package:app/utils/myStyle.dart';
Text('activities', style: MyFontStyle.h1)
Copy the codeFour,
Used when the UI color less ThemeData properties, to make the global pattern, the question is not big, we usually write the color attribute to write their own widgets, but many colors will be the inside of the properties are modified, it will according to their own troubles, and cannot be custom name, there is no better semantic, You can write a class in main.dart and call it globally, which is more convenient and flexible
We generally use flutter_ScreenUtil this plug-in, are in the ordinary page, very convenient to use, the general box control is ok, but like the title, subtitle, description and other pages of the same font style, we can use global Settings, if the need to adjust the later is more convenient. However, the homepage initialization is a little bit of a hole, which is not too difficult to solve, just add another layer of MediaQuery to MyApp().