Flutter 系列文章：Flutter PlaceHolder 控件介紹

Flutter PlaceHolder 控件介紹

1、使用方法

Placeholder({
    Key key,
    this.color = const Color(0xFF455A64), // 設置佔位符顏色 defalutBlue Grey 700 
    this.strokeWidth = 2.0,//設置畫筆寬度
    this.fallbackWidth = 400.0,//設置佔位符寬度
    this.fallbackHeight = 400.0,//設置佔位符高度
  })
複製代碼

2、一個完整的例子

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: MyHomePage(title: 'Text Demo'),
    );
  }
}


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

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

class _MyHomePageState extends State<MyHomePage>{
  @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>[
            Icon(
              Icons.access_alarm,//設置使用哪一種圖標
              size: 300,//設置圖標大小
              color: Colors.yellow,//設置圖標顏色
              textDirection:TextDirection.rtl ,//設置用於渲染圖標的文本方向
              semanticLabel: "語義標籤",//設置用於渲染圖標的文本方向
            ),

            Placeholder(
              color: Colors.blue,// 設置佔位符顏色 defalutBlue Grey 70
              strokeWidth: 5,//設置畫筆寬度
              fallbackHeight: 200,//設置佔位符寬度
              fallbackWidth: 200,//設置佔位符高度
            ),

            Icon(
              Icons.build,
              size: 300,
              color: Colors.green,
              textDirection:TextDirection.ltr ,
            ),
          ],

        ),
      ),
    );
  }
}




複製代碼