Flutter學習三天搞定專案
如圖下：
一，Flutter:
Flutter和“ReactNative”，我想很多作為android和前端或者ios開發人員都聽說過，我們可以JavaScript和React獲得一致的開發體驗，但是RN在實際平臺上還需要適配和橋接差異性，這個過程其實很痛苦的。而Flutter則是依靠Flutter Engine虛擬機器在iOS和Android上執行，開發人員可以通過Flutter框架和API在內部進行互動。Flutter Engine使用C/C++編寫，具有低延遲輸入和高幀速率的特點。除此之外，Flutter提供了自己的小部件集合，可以直接在OS平臺提供的畫布上描繪控制元件。可以說實際意義上的一個語言實現多平臺執行。
二，學習三天的我寫的Demon並且開始開發專案：
我也是上一週聽到幾個android群裡討論Flutter的，各種天花亂墜，有些說巢狀很麻煩，我想是不是和前端有點像，有些說提供的框架和第三方不完善，或者說遲早gg,當然了，有一個大佬說看了一個月，也分享了他的部落格，我第一時間是看了他的Demon，我當時想上手一個月是不是很難了。接下來我就直接奔著官方網站去進行閱讀，當然了搭建環境這個環境我沒算到學習時間之內，一步步按照官方API閱讀並去寫程式碼。我閱讀過程中發現，哇這借鑑了web前端的很多特點，小部件盒子模型，以及熟悉的書寫格式bootmstrup這讓我很快的用一個早上搞定了小部件部分。而且寫了很多的案例。我發現佈局流程圖如果理解了很好寫佈局，不存在巢狀太導致思路模糊或者找不見問題。我希望直接入手光放API。最快最直接，最明白。 寫了一天半Demon如下圖所示： 當我注重看Flutter框架設計時候，官方網站提供了bottomNavigationBar但是發現設定路由進入子頁面之後它沒法消失，百度了很多至今沒有一個人寫個原始的Flutter應用程式框架。這裡只好自己寫了，當然了思路都一樣，用下面點選事件去記錄index然後替換顯示三個對應的頁面就可以了。對於生命傳值路由我希望大家可以去看官方網站比較需要理解，而且很好理解的，動態和靜態如果設定路由，如何傳值這些都是分分鐘的事情。Flutter官網連線.
三，寫程式碼： 1.框架的搭建：
框架如下圖：三個可點選部件，然後點選可以改變顏色，且切換不同內容。在Flutter裡面什麼都是小部件組成，android中點選切換碎片，我們Flutter點選切換小部件。我們最初的時候是不是都是些三個按鈕和文字的RadioGrup或者Line...來切換三個碎片。這裡我們一樣三個小部件來切換三個自定義部件就可以了。 框架如下：
class MyHomePager extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePager>
with SingleTickerProviderStateMixin {
bool preed_is = true;
bool preed_is_second = false;
bool preed_is_threed = false;
int index = 0;
_pressedChangerd() {
/*Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
return new WidgetPager();
},
),
);*/
setState(() {
if (index != 0) {
index = 0;
preed_is = !preed_is;
}
if (preed_is_second) {
preed_is_second = !preed_is_second;
}
if (preed_is_threed) {
preed_is_threed = !preed_is_threed;
}
});
}
_pressedChangerd_Second() {
setState(() {
if (index != 1) {
index = 1;
preed_is_second = !preed_is_second;
}
if (preed_is) {
preed_is = !preed_is;
}
if (preed_is_threed) {
preed_is_threed = !preed_is_threed;
}
});
}
_pressedChangerd_Threed() {
setState(() {
if (index != 2) {
index = 2;
preed_is_threed = !preed_is_threed;
}
if (preed_is_second) {
preed_is_second = !preed_is_second;
}
if (preed_is) {
preed_is = !preed_is;
}
});
}
@override
void dispose() {
//頁面失去焦點時候
super.dispose();
}
File _image;
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
Future<String> _counter;
String namess;
Future<Null> _incrementCounter() async {
final SharedPreferences prefs = await _prefs;
final String counter =
prefs.getString('counter').length > 0 ? 'Love You' : 'Love Flutter';
setState(() {
_counter = prefs.setString("counter", counter).then((bool success) {
return counter;
});
});
}
@override
void initState() {
super.initState();
_counter = _prefs.then((SharedPreferences prefs) {
namess = prefs.getString('counter');
return (prefs.getString('counter') ?? 0);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Center(
child: new Text(index == 0
? '三天搞定--Flutter'
: index == 1 ? 'Flutter-互動' : 'Flutter--系統呼叫'),
),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Container(
//這裡我們需要用index判斷切換的介面內容顯示哦！三元就行，真的說實話，百度這麼強大沒有一個人寫出這種場見的android應用切換碎片場景。用TabBarView和bottomNavigationBar根本就沒法去掉下面的導航欄。可能是我目前水平不夠吧。這裡我根據android fragment佔用位置用Fragment去替換內容從而實現切換，思路一模一樣。
//所顯示更具index判斷點選的是那個按鈕，然後做響應的內容小部件顯示就可以了。下面用一個很長很長的三元計算寫了出來，如果點選是第一個那麼，替換為第一個內容小部件，如果是index=2第二個
//依次往右邊走就可以。
child: index == 0
? new ListView(
children: <Widget>[
new ImageAnimal(),
WidgetPagers(),
new WidgetStudy(),
new WidgetText(),
/* 這是優化之前的程式碼很煩，index == 0
? new ImageAnimal()
: index == 1 ? WidgetStudy() : new MyFadeTest(),*/
],
)
: index == 1
? new Container(
child: FragmentPagerSecond(),
color: Colors.black12,
)
: new ListView(
children: <Widget>[
new Container(
color: Colors.teal,
child: new Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Container(
color: Colors.teal,
child: new ClipOval(
//這個一般可以作為圓形的裁剪哦。
child: new SizedBox(
width: 100.0,
height: 100.0,
child: _image == null
? new Text('點選右邊的按鈕新增圖片')
: new Image.file(
_image,
fit: BoxFit.fill,
),
),
),
/*
*
*/ /*
child: _image == null
? new Text('點選右邊的按鈕新增圖片')
: new Image.file(
_image,
width: 300.0,
height: 200.0,
fit: BoxFit.fill,
),*/
),
new FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: new Icon(Icons.add_a_photo),
),
],
),
width: 600.0,
height: 200.0,
),
new MyFadeTest(),
new GestureDetector(
child: new RaisedButton(
onPressed: _incrementCounter,
child: new Text(
'點選我儲存資料"Love You"到本地',
style: new TextStyle(color: Colors.white),
),
color: Colors.teal,
),
),
new Text(namess == null ? "沒有儲存成功" : namess),
],
),
width: 600.0,
height: 900.0,
decoration: new BoxDecoration(color: Colors.white),
),
),
new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new GestureDetector(
onTap: _pressedChangerd,
child: new Container(
child: new Column(
children: <Widget>[
new Icon(
Icons.home,
color:
preed_is ? Colors.orangeAccent : Colors.white,
),
new Text(
'佈局',
style: new TextStyle(
color: preed_is
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
new GestureDetector(
onTap: _pressedChangerd_Second,
child: new Container(
child: new Column(
children: <Widget>[
new Icon(
Icons.computer,
color: preed_is_second
? Colors.orangeAccent
: Colors.white,
),
new Text(
'互動',
style: new TextStyle(
color: preed_is_second
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
new GestureDetector(
onTap: _pressedChangerd_Threed,
child: new Container(
child: new Column(
children: <Widget>[
new Icon(
Icons.person,
color: preed_is_threed
? Colors.orangeAccent
: Colors.white,
),
new Text(
'系統',
style: new TextStyle(
color: preed_is_threed
? Colors.orangeAccent
: Colors.white),
),
],
),
),
),
],
),
width: 600.0,
height: 60.0,
color: Color(0xFF00796B),
padding: new EdgeInsets.only(top: 5.0),
),
],
));
}
}
複製程式碼當然了這個應用可以提供很多小部件的學習以及動畫的互動和系統呼叫方面的。如下圖：
專案會一直完善的，https://github.com/luhenchang/flutter_study