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

sometime-rock發表於2019-03-19

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

複製程式碼

相關文章