任何构建应用程序的 UI 开发人员都必须处理字体。 Google Fonts 提供了多种字体,可用于改进用户界面的字体。 Flutter提供了一个谷歌字体包,可以用来实现各种可用的字体。下面列出了一些可通过 Google 字体包使用的字体:
- 机器人
- 打开 sans
- 拉托
- 奥斯瓦尔德
- 雷威
在本文中,我们将构建一个简单的应用程序并为其实现一些 Google 字体。为此,请执行以下步骤:
- 将google_fonts依赖项添加到pubspec.yaml 文件。
- 将依赖项导入到 main.js 中。dart文件。
- 使用 StatelessWidget 为应用程序提供结构
- 使用 StatefulWidget 为应用程序设计主页
- 将文本添加到应用程序正文的正文并应用字体
添加依赖:
使用pubspec.yaml 中的 Google 字体依赖项,如下所示:
导入依赖:
在 main.js 中导入依赖项。 dart文件如下:
import 'package:google_fonts/google_fonts.dart';
创建应用程序结构:
使用StatelessWidget为应用程序提供一个简单的结构,如下所示:
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'GeeksForGeeks'),
);
}
}
Dart
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Dart
children: [
Text(
'You have pushed the button this many times:',
style: GoogleFonts.oswald(textStyle: display1),
),
Text(
'$_counter',
style: GoogleFonts.lato(fontStyle: FontStyle.italic),
),
],
),
),
Dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'GeeksForGeeks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
final TextStyle display1 = Theme.of(context).textTheme.headline4;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
style: GoogleFonts.oswald(textStyle: display1),
),
Text(
'$_counter',
style: GoogleFonts.lato(fontStyle: FontStyle.italic),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.play_arrow),
),
);
}
}
设计主页:
为了设计,应用程序的主页使用了StatefulWidget。在 0 处启动状态,计算我们将添加到主页的按钮的点击次数。为此,请使用以下内容:
Dart
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
实现字体:
我们将使用Oswald 字体和Lato 字体的字体。在TextStyle属性中,您可以添加如下所示的相同内容:
Dart
children: [
Text(
'You have pushed the button this many times:',
style: GoogleFonts.oswald(textStyle: display1),
),
Text(
'$_counter',
style: GoogleFonts.lato(fontStyle: FontStyle.italic),
),
],
),
),
完整的源代码:
Dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'GeeksForGeeks'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
final TextStyle display1 = Theme.of(context).textTheme.headline4;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
style: GoogleFonts.oswald(textStyle: display1),
),
Text(
'$_counter',
style: GoogleFonts.lato(fontStyle: FontStyle.italic),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.play_arrow),
),
);
}
}
输出:
想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!