上代碼
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter gesture', // home: TutorialHome(), home: _home(), )); } class _home 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>[ TextField(//提示縮小在輸入上方 decoration: InputDecoration( fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello'), ), TextField(//輸入后提示消失,如果輸入不符合要求就可以報相應錯誤(自定義提示語) decoration: InputDecoration( fillColor: Colors.blue.shade100, filled: true, hintText: 'Hello', errorText: 'error'), ), TextField(//添加圖標 decoration: InputDecoration( fillColor: Colors.blue.shade100, filled: true, helperText: 'help', prefixIcon: Icon(Icons.local_airport), suffixText: 'airport'), ), TextField(//輸入框添加圓切角 decoration: InputDecoration( contentPadding: EdgeInsets.all(10.0), border: OutlineInputBorder( borderRadius: BorderRadius.circular(15.0), // borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//沒什么卵效果 )), ), Theme(//利用ThemeData改變TextField的邊框樣色 data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue), child: TextField( decoration: InputDecoration( contentPadding: EdgeInsets.all(10.0), border: OutlineInputBorder( borderRadius: BorderRadius.circular(15.0), // borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//沒什么卵效果 )), ), ), Container(//改變邊框的粗細,這些TextField的decoration徹底不能滿足要求了,需要重構成這種方式,InputDecoration.collapsed可以禁用裝飾線,而是使用外面包圍的Container的裝飾線 padding: const EdgeInsets.all(8.0), alignment: Alignment.center, height: 60.0, decoration: new BoxDecoration( color: Colors.blueGrey, border: new Border.all(color: Colors.black54, width: 4.0), borderRadius: new BorderRadius.circular(12.0)), child: new TextFormField( decoration: InputDecoration.collapsed(hintText: 'hello'), ), ), 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 , ), ], ), ), ); } }
見到就是干