flutter入門技巧

摘要： 按理來說，從事web前端開發的學習react native更適合一些，可偏偏選擇了flutter，學起來只有掉頭髮的份 無奈沒有專案實戰，也只能忙裡偷閒的時候自己畫餅充飢。 本次成果最終樣子： 具體實現過程並不難，後面後直接貼程式碼。這裡主要...

按理來說，從事web前端開發的學習react native更適合一些，可偏偏選擇了flutter，學起來只有掉頭髮的份

無奈沒有專案實戰，也只能忙裡偷閒的時候自己畫餅充飢。

本次成果最終樣子：

具體實現過程並不難，後面後直接貼程式碼。這裡主要總結一下學習到的開發技巧：

1. 圖片的使用

圖片資料夾如圖所示，按照官網的教程 使用圖片還需要在 pubspec.yaml 檔案中進行配置：

這是官網的使用方式，擔如果需要引入的圖片很多，那得多雞肋？所以查找了一下資料，果然存在懶人方式：

如圖只需要配置一下檔案的路徑即可。

如何使用該圖片，需要在 widget 中配置圖片的路徑，如圖：

2. TextField

3. 鍵盤彈起報錯

4. 左右佈局技巧

如圖需要一個居左對齊，一個需要居右對齊。這裡先取一個代號，忘記密碼：leftItem; 簡訊驗證碼登入：rightItem.這裡的實現方式是：

1. 使用row包裹兩個leftItem和rightItem。這樣實現在一行顯示。

2. 用Expanded包裹leftItem，Expanded將自動分配剩餘最大寬度。

3. leftItem該如何對齊呢？還是採用同樣的方法，leftItem同樣需要一個Expanded來自動分配最大的空間

問題

圖中 **忘記密碼？**始終存在著一個padding無法去除，不解

程式碼：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

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) {
//設定適配尺寸 (填入設計稿中裝置的螢幕尺寸) 假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
Widget buildTextField (name, placeHolder) {
return new Container(
height: ScreenUtil().setHeight(100),
child: new TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(ScreenUtil().setWidth(10)),
labelText: placeHolder,
prefixStyle: TextStyle(
letterSpacing: ScreenUtil().setWidth(10),
color: Color(0xFF333333)
),
prefixText: name
),
)
);
}
return new Scaffold(
body: new SingleChildScrollView(
child: new Container(
padding:new EdgeInsets.fromLTRB(ScreenUtil().setWidth(30), 0, ScreenUtil().setWidth(30), 0) ,
color: Color(0xFFFFFFFF),
child: new Column(
children: <Widget>[
new Container(
height: ScreenUtil().setHeight(510),
child: new Center(
child: new Image.asset(
'asset/images/logo_01.png',
width: ScreenUtil().setWidth(102),
height: ScreenUtil().setWidth(114),
),
)
),
buildTextField('賬號', '請輸入賬號'),
new Container(
margin: new EdgeInsets.only(top: ScreenUtil().setHeight(50)),
child: new Container(
height: ScreenUtil().setHeight(100),
child: new TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(ScreenUtil().setWidth(10)),
labelText: '請輸入密碼',
prefixStyle: TextStyle(
letterSpacing: ScreenUtil().setWidth(10),
color: Color(0xFF333333)
),
prefixText: '密碼',
suffixIcon: Icon(Icons.remove_red_eye)
),
)
)
),
new Container(
width: ScreenUtil().setWidth(690),
margin: EdgeInsets.only(top: ScreenUtil().setHeight(80)),
height: ScreenUtil().setHeight(70),
child: new RaisedButton(
onPressed: () {},
child: new Text(
'登入',
style: TextStyle(
color: Color(0xFFffffff)
)
),
color: Color(0xFF1b82d2)
),
),
new Container(
padding: EdgeInsets.only(top: ScreenUtil().setHeight(20), bottom: ScreenUtil().setHeight(20)),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Expanded(
//child: new Text('忘記')
child: new Row(
children: <Widget>[
new FlatButton(
padding: EdgeInsets.zero,
onPressed: null, child: Text(
'忘記密碼？',
style: TextStyle(
color: Color(0xFF1b82d2)
),
)
),
new Expanded(child: new Text(''))
],
)
),
new FlatButton(
padding: EdgeInsets.zero,
onPressed: null, child: Text('簡訊驗證碼登入',
style: TextStyle(
color: Color(0xFF1b82d2)
),)
)
],
),
)
],
),
)
)
);
}
}


複製程式碼