目录
前言
今天在查看Flutter源码的时候，发现了一个有意思的组件FlutterLogo.顺便调用了一下发现挺有意思的，代码以及实现比较简单，新手阅读源码的话，可以看下这个Widget的内部实现，用它练练手。
一、FlutterLogo简介
文档对这个widget的介绍比较简单：Flutter是一个widget，用来展示Flutter的logo。这个Widget遵循IconTheme。
二、FlutterLogo用法
默认情况下,FlutterLogo的尺寸是大小是24。
我们可以通过代码看下默认显示的效果。例如我们通过下面的代码展示一个居中的FlutterLogo.效果图如图1所示：
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FlutterLogo'),
),
body: const Center(
child: FlutterLogo(),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
图1.居中显示的FlutterLogo
三、FlutterLogo属性详解
1.style
我们可以使用style控制Logo的布局风格。这是个FlutterLogoStyle类型的枚举，可选值有三个：
-
FlutterLogoStyle.markOnly：仅显示 Logo 图案
-
FlutterLogoStyle.horizontal：水平排列 Logo 和文本
-
FlutterLogoStyle.stacked：将 Logo 和文本堆叠显示
我们可以通过下面的实例看一下FlutterLogo的几种布局风格：
图2.FlutterLogo的不同布局方式
2.size
控制 FlutterLogo 的宽度和高度，默认大小为 24.0。
3.textColor
设置 Logo 下方 “Flutter” 文本的颜色
4.duration
设置属性变化时的动画持续时间，默认值为 kThemeChangeDuration。
5.curve
定义属性变化动画的曲线，默认值为 Curves.fastOutSlowIn。
6.一个简单的例子
下面的例子中我们可以清晰的看到每个FlutterLogo的属性。
图3.FlutterLogo属性
完整代码如下：
import 'package:flutter/material.dart';
class FlutterLogoDemo extends StatefulWidget {
static String routeName = '/flutterLogo_examples_page';
const FlutterLogoDemo({super.key});
@override
State<FlutterLogoDemo> createState() => _FlutterLogoDemoState();
}
class _FlutterLogoDemoState extends State<FlutterLogoDemo> {
double? flutterLogoSize = 50.0;
bool is50 = true;
bool is100 = false;
bool is150 = false;
Color textColor = const Color(0xFF757575);
bool isRed = false;
bool isGreen = false;
bool isYellow = false;
bool isTeal = false;
FlutterLogoStyle flutterLogoStyle = FlutterLogoStyle.horizontal;
bool isHorizontal = false;
bool isMarkOnly = false;
bool isStacked = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FlutterLogo',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Divider(),
Padding(padding:const EdgeInsets.all(20),child:FlutterLogo(
size: flutterLogoSize,
textColor: textColor,
style: flutterLogoStyle,
),),
const Divider(),
const SizedBox(height: 10,),
const Text('选择Flutter的排序方式',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
const SizedBox(height: 10,),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(onPressed: (){
setState(() {
isHorizontal = true;
isMarkOnly = false;
isStacked = false;
flutterLogoStyle = FlutterLogoStyle.horizontal;
});
}, child:Text('horizontal',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isHorizontal?Colors.black:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
isHorizontal = false;
isMarkOnly = true;
isStacked = false;
flutterLogoStyle = FlutterLogoStyle.markOnly;
});
}, child:Text('markOnly',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isMarkOnly?Colors.black:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
isHorizontal = false;
isMarkOnly = false;
isStacked = true;
flutterLogoStyle = FlutterLogoStyle.stacked;
});
}, child: Text('stacked',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isStacked?Colors.black:Colors.grey),)),
],
),
const SizedBox(height: 20,),
const Divider(),
const Text('设置Size大小',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(onPressed: (){
setState(() {
is50 = true;
is100 = false;
is150 = false;
flutterLogoSize = 50;
});
}, child:Text('50',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: is50?Colors.black:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
is50 = false;
is100 = true;
is150 = false;
flutterLogoSize = 100;
});
}, child:Text('100',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: is100?Colors.black:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
is50 = false;
is100 = false;
is150 = true;
flutterLogoSize = 150;
});
}, child: Text('150',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: is150?Colors.black:Colors.grey),)),
],
),
const SizedBox(height: 10,),
const Divider(),
const Text('设置Logo颜色',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(onPressed: (){
setState(() {
isRed = true;
isGreen = false;
isYellow = false;
isTeal = false;
textColor = Colors.red;
});
}, child:Text('Red',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isRed?Colors.red:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
isRed = false;
isGreen = true;
isYellow = false;
isTeal = false;
textColor = Colors.green;
});
}, child:Text('Green',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isGreen?Colors.green:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
isRed = false;
isGreen = false;
isYellow = true;
isTeal = false;
textColor = Colors.yellow;
});
}, child: Text('Yellow',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isYellow?Colors.yellow:Colors.grey),)),
ElevatedButton(onPressed: (){
setState(() {
isRed = false;
isGreen = false;
isYellow = false;
isTeal = true;
textColor = Colors.teal;
});
}, child: Text('Teal',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold,color: isTeal?Colors.teal:Colors.grey),)),
],
),
const SizedBox(height: 10,),
const Divider(),
],
),
);
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
