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

Flutter FlutterLogo 控件介紹

1、使用方法

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 發生更改,則會生成徽標動畫的曲線。
  }) 
複製代碼

2、一個完整的例子

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 發生更改,則會生成徽標動畫的曲線。
            )
          ],
        ),
      ),
    );
  }
}

複製代碼
相關文章
相關標籤/搜索