TextStyle 的backgroundColor可为文字添加背景色
Text(
'文字添加背景色',
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
backgroundColor: Colors.red,
Text控件即容器,是一个常用的控件,下面的实例有7个不同样式的文本控件:import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
老孟导读:大家好,这是【Flutter实战】系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速掌握。
第一篇链接:【Flutter实战】移动技术发展史
Text是显示文本的组件,最常用的组件,没有之一。基本用法如下:
Text('老孟')
注意:Text组件一定要包裹在Scaffold组件下,否则效果如下:
文本的样式在style中设置,类型为TextStyle,Te..
shaderCallback: (bounds) => LinearGradient(
colors: [Colors.red, Colors.blue],
).createShader(bounds),
child: Text(
'Hello World',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
在这个示例中,我们使用 `LinearGradient` 创建一个红色和蓝色之间的渐变。 `shaderCallback` 函数使用该渐变来创建一个 `Shader` ,并将其传递给 `ShaderMask` 。最后,我们将 `Text` widget 作为 `ShaderMask` 的子元素,从而实现了文字渐变色的效果。
你可以根据需要调整渐变的颜色和方向,以及 `Text` widget 的样式。