Flutter 系列文章:Flutter FlutterLogo 控件介绍

1,928 阅读1分钟

Flutter FlutterLogo 控件介绍

一、使用方法

FlutterLogo({
    Key key,
    this.size,//设置大小
    this.colors,//设置颜色
    this.textColor = const Color(0xFF616161),//用于在徽标上绘制“Flutter”文本的颜色,如果样式为 FlutterLogoStyle.horizntal或FlutterLogoStyle.stacked。适当的颜色是const Color(0xFF616161)(中灰色),白色背景。
    this.style = FlutterLogoStyle.markOnly,//是否以及在何处绘制“颤动”文本。默认情况下,仅绘制徽标本身
    this.duration = const Duration(milliseconds: 750),//如果更改样式,颜色或 textColor属性,则动画的时间长度
    this.curve = Curves.fastOutSlowIn,//如果样式,颜色或textColor 发生更改,则会生成徽标动画的曲线。
  }) 

二、一个完整的例子

image

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: FlutterLogoPageDemo(title: 'FlutterLogoPageDemo'),
    );
  }
}


class FlutterLogoPageDemo extends StatefulWidget {
  FlutterLogoPageDemo({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _FlutterLogoPageDemoState createState() => _FlutterLogoPageDemoState();
}

class _FlutterLogoPageDemoState extends State<FlutterLogoPageDemo>{
  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[
            FlutterLogo(
              colors: Colors.yellow,//设置颜色
              size: 200,//设置大小
              textColor: Colors.blue,//用于在徽标上绘制“Flutter”文本的颜色,如果样式为
              duration: Duration(microseconds: 1),//是否绘制“颤动”文本。默认情况下,仅绘制徽标本身
              style: FlutterLogoStyle.horizontal ,//如果更改样式,颜色或 textColor属性,动画的时间长度
              curve: Curves.bounceIn,////如果样式,颜色或textColor 发生更改,则会生成徽标动画的曲线。
            )
          ],
        ),
      ),
    );
  }
}