Flutter三天学习基础-------一天搞定项目

Flutter学习三天搞定项目

2019年，相继推出了flutter免费视频教学。希望能够帮助初学者。最终搞定b站一二级界面：
https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1
<https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1>
后面相继推出html和原生视频等。

2018年，10.10日最近接了一个项目可以提供相关页面，遇到困难的萌新可以一起谈论交流。

!

!!!!
下面是android模拟器运行结果：
!!!!!!!!!!

如图下：


一，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官网连接. <https://flutter.io/tutorials/layout/#alignment>



三，写代码：
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
<https://github.com/luhenchang/flutter_study>
2019年，相继推出了flutter免费视频教学。希望能够帮助初学者。最终搞定b站一二级界面以及Dart基础：
https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1
<https://space.bilibili.com/265453330?spm_id_from=333.788.b_765f7570696e666f.1>

扫码下载安装看看Demo

• « 上一篇：千峰django教程：基本操作笔记整理
• » 下一篇：docker系列（二）：docker的安装与使用