Flutter1移动开发dreamsdeng的博客-

1.  Flutter 环境搭建

混合App开发技术： 

 1. 通过WebView包裹，就是网页在APP中，技术phonegap、
 2. ReactNative、Weex: 使用js封装原生anroid、ios控件
 3.  flutter:  原生

Flutter 配置上手： 

1. Flutter Sdk 配置
 Flutter Sdk: 
下载路径： https://blog.csdn.net/Jiang_Rong_Tao/article/details/104615339
 flutter doctor： 查看flutter环境是否有问题
 skd路径: /Users/denganzhi/Library/Android/sdk
 open .bash_profile
 export PATH=$PATH:/Users/denganzhi/flutter_install/flutter/bin

 配置环境变量： 
 source .bash_profile
 flutter –help
 flutter doctor  :  有问题都会提示
 flutter doctor –android-licenses ： 根据提示安装licenses即可

 2.  android studio 安装flutter插件：在启动的时候选择安装

vscode 使用
Fullter[自动安装dart插件] 插件
Awesome Flutter Snippets : vscode插件,
==================================================================
 3.  国内镜像配置: 新建项目的时候卡顿无法下载可以配置如下

  3.1.flutter⁩/⁨packages⁩/⁨flutter_tools⁩/gradle⁩/flutter.gradle  buildscript {     repositories {       //  google()       //  jcenter()         maven{             url 'https://maven.aliyun.com/repository/jcenter'         }         maven{             url 'https://maven.aliyun.com/nexus/content/groups/public'         }     }     dependencies {         classpath 'com.android.tools.build:gradle:3.1.2'     } }    3.2.android/build.grale配置,新建Android项目以后，可能无法运行，配置国内镜像  buildscript {     repositories {    //     google()  //       jcenter()         // 替换国内镜像         maven { url 'https://maven.aliyun.com/repository/google' }         maven { url 'https://maven.aliyun.com/repository/jcenter' }         maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }      }      dependencies {         classpath 'com.android.tools.build:gradle:3.2.1'     } }  allprojects {     repositories {   //      google()  //       jcenter()         // 替换国内镜像           maven { url 'https://maven.aliyun.com/repository/google' }         maven { url 'https://maven.aliyun.com/repository/jcenter' }         maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }      } }

2.  布局控件入门 

   StatelessWidget 
          MaterialApp 
              home:  窗口主题  
                 body:  body 内容 
                    child:  
                    
      1. Text 控件
      2. 容器控件 Container
      3. 图片组件
      4. 列表组件ListView， 纵向列表、横向列表
      5. 动态列表ListView
      6. gridView使用
      7. Row 水平布局
     7.1. 水平线性布局
     7.2.平分控件   Expanded 平分控件,灵活的
     7.3.  2边 包裹内容，中间占据整个区域大小 2测 包裹内容，中间 匹配父元素，权重设置为1
     8. Column 垂直布局
     9.  层叠布局  
       FractionalOffset(0.5, 0.8),相对于 容器 Container 的位置 百分比 ，相对于左边50%， 相对上面80%
       相对布局 Positioned    相对于 bottom: 10 底部，     right: 10 右边 

 import 'package:flutter/material.dart';   // MyApp  是一个类, 继承 StatelessWidget void main() => runApp(MyApp(       items:new List<String>.generate(100, (i)=>"item $i") ));  class MyApp extends StatelessWidget {   // This widget is the root of your application.    MyApp({Key key,@required this.items}):super(key:key);    final List<String> items;     @override   Widget build(BuildContext context) {       // 相对布局 Positioned    相对于 bottom: 10 底部，     right: 10 右边     var stack =Stack(       // CircleAvatar 相对于 容器 Container 的位置 百分比 ，相对于左边50%， 相对上面80%       alignment: FractionalOffset(0.5, 0.8),       children: <Widget>[         new Container(           decoration: new BoxDecoration(             color: Colors.pink           ),           padding: EdgeInsets.all(5.0),         ),         new CircleAvatar(           backgroundImage: new NetworkImage("https://www.kaadas.com/vancheerfile/Images/2019/8/2019080704511484.png"),           radius: 100.0,         ),         new Positioned(             child: Text("hello jack"),           bottom: 10,           right: 10,         )       ],      );      return MaterialApp(       title: 'Flutter Demo',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       // 窗口主题       home: Scaffold(          appBar: AppBar(title: Text("ListView Widget"),),         // body 内容           body: Center(             // 1. Text 控件 //            child: Text( //                "hello worldello worello worello worello worello worello worello worello worello worello worello wor", //                textAlign: TextAlign.left, //                maxLines: 1, //              overflow: TextOverflow.ellipsis, //              // 设置样式 //              style: TextStyle( //                fontSize: 35.0, //                color: Color.fromARGB(255, 255, 100, 100), //                decoration: TextDecoration.underline, //                decorationStyle: TextDecorationStyle.solid // //              ), //            ),             //2. 容器控件             /**  注意：              *  1. container背景色和decoration不能同时设置              *  2.              */             child: Container( //              child: Text( //                "我是容器控件的内容", //                style: TextStyle( //                  fontSize: 30, //                ), //              ),               // 上左、中、右               // 下左、中、右对齐               alignment: Alignment.topLeft,               width: 300,               height: 500,           //    color: Colors.lightBlue, //              padding: EdgeInsets.fromLTRB(10, 20, 0, 0), //              margin: EdgeInsets.all(40), //              decoration: BoxDecoration( //                 border: Border.all(color: Color.fromARGB(255, 10, 10, 233)), //              ),                // 3. 图片组件 //              child:Image.network( //                "https://www.kaadas.com/vancheerfile/Images/2019/8/2019080704511484.png", //                 fit: BoxFit.fill, //               ),   /**  配置本地图片： 在更目录下新建images目录，pubspec.yaml 下配置路径   *   body: Center(          child: Image.asset("images/ic_launcher.png"),        )     */                // 4. 列表组件ListView， 纵向列表、横向列表 //              child: ListView( //                // 可以指定横向列表 ，里面可以是ListTile，可以是Container 容器 //                scrollDirection: Axis.vertical, //                children: <Widget>[ //                  new ListTile( //                    leading: new Icon(Icons.perm_camera_mic), //                    title: Text("perm_camera_mic"), //                  ), //                  new ListTile( //                    leading: new Icon(Icons.add_call), //                    title: Text("add_call"), //                  ) //                ], //              ),                 // 5. 动态列表ListView //              child: ListView.builder( //                itemCount: items.length, //                itemBuilder: (context,index){ //                  return ListTile( //                    title: Text('${items[index]}'), //                  ); //                }, //                ) // //            ),            // 6. gridView使用 //         child: GridView.count( //            padding: EdgeInsets.all(20.0), //            crossAxisSpacing: 10.0,  // 间隙列之间 //            crossAxisCount: 3 ,      // 每列 3个元素 //            children: <Widget>[ //              Text("hello1"), //              Text("hello2"), //              Text("hello3"), //              Text("hello4"), //              Text("hello5"), //              Text("hello6"), //            ], //          ),               // 7. gridview 写法2 //           child: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //             crossAxisCount: 3, //             mainAxisSpacing: 2.0,   //纵轴的间距 //             crossAxisSpacing: 2.0,  // 横轴的间距 //             childAspectRatio: 1,  // 长宽比 //           ), //           children: <Widget>[ //              Text("Widget1"), //              Text("Widget2"), //              Text("Widget3"), //              Text("Widget4"), //              Text("Widget5"), //              Text("Widget6"), //           ], //           ),                 // Row 水平布局               // 1.水平线性布局 //              child: Row( //                children: <Widget>[ //                  new RaisedButton( //                    onPressed: (){}, //                    color:Colors.redAccent, //                    child: Text("Red Button--Red Button"), //                  ) //                  ,   new RaisedButton( //                    onPressed: (){}, //                    color:Colors.orangeAccent, //                    child: Text("Button"), //                  ), //                  new RaisedButton( //                    onPressed: (){}, //                    color:Colors.lightBlue, //                    child: Text("li"), //                  ) //                ], //              ),                // 2.平分控件   Expanded 平分控件,灵活的 //              child: Row( //                children: <Widget>[ //                  Expanded( //                  child: RaisedButton( //                      onPressed: (){}, //                    color:Colors.redAccent, //                    child: Text("Red Button--Red Button"), //                      ), //                  ), //                  Expanded( //                    child: RaisedButton( //                      onPressed: (){}, //                      color:Colors.lightBlue, //                      child: Text("Red Button--Red Button"), //                    ), //                  ), //                  Expanded( //                    child: RaisedButton( //                      onPressed: (){}, //                      color:Colors.black, //                      child: Text("Red Button--Red Button"), //                    ), //                  ) //                ], //              ),                // 3.  2边 包裹内容，中间占据整个区域大小 2测 包裹内容，中间 匹配父元素，权重设置为1 //              child: Row( //                children: <Widget>[ //                  RaisedButton( //                      onPressed: (){}, //                      color:Colors.redAccent, //                      child: Text("Red1"), //                  ), //                  Expanded( //                    child: RaisedButton( //                      onPressed: (){}, //                      color:Colors.lightBlue, //                      child: Text("Red Button--Red Button"), //                    ), //                  ), //                  RaisedButton( //                      onPressed: (){}, //                      color:Colors.orangeAccent, //                      child: Text("Red2"), //                    ), //                ], //              ),                //8. Column 垂直布局 //              child: Column( //                // 文本左对齐、右对齐、居中对齐 //                crossAxisAlignment: CrossAxisAlignment.end, //                // 垂直居中 //                mainAxisAlignment: MainAxisAlignment.center, //                children: <Widget>[ //                  Text("I am a child....."), //                  Expanded(    // 填充所有剩余控件 //                    child: Text("I 2") //                    ), //                  Text("I 3") //                ], //              ),                //9.  层叠布局               child: stack,            ),         ),       ),         // 窗口的主体    //   home: MyHomePage(title: 'Flutter 变得更发给电饭锅好电饭锅电饭锅地方刚发的的  Home Page'),      );   } }     

3.  Flutter 页面跳转传递

 import 'package:flutter/material.dart';   class Product{   final String title; //标题   final String desc;   Product(this.title,this.desc); }  // MyApp  是一个类, 继承 StatelessWidget void main() => runApp(MyApp(  ));  class MyApp extends StatelessWidget {   // This widget is the root of your application.     @override   Widget build(BuildContext context) {      return MaterialApp(       // body 内容         home: new FirstScreen()     );   } } class FirstScreen extends StatelessWidget{    List<Product> products= List.generate(20, (i)=>Product("商品$i","编号$i"));    @override   Widget build(BuildContext context) {     // TODO: implement build     /**      *  导航跳转问题：https://blog.csdn.net/nimeghbia/article/details/84388725      *    外层不可以是： MaterialApp      */     return Scaffold(       appBar: AppBar(title: Text("商品列表")),       body: ListView.builder(           itemCount: products.length,           itemBuilder: (context,index){             return ListTile(               title: Text( products[index].title),               //  这里 通过 构造函数 传递值                onTap:(){                   Navigator.push(                       context,                        MaterialPageRoute(builder: (context)=>new SecondScreen(products[index])               ));                },             );           }         ),     );   }  }     // 第二个页面 class SecondScreen extends StatelessWidget{    Product product;    SecondScreen(Product pro){     this.product=pro;   }   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: Text(product.title)),       body: Center(         child: RaisedButton(             child: Text("返回"),             onPressed: (){               Navigator.pop(context);             }         ),       ) ,     );   }  }    

  4. Flutter  Android 打包

1. 生成签名
jre/bin/下的 keytool: 
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

2. 配置签名文件在项目android目录下： 
文件名： key.properties
内容： 
storePassword=123456
keyPassword=123456
keyAlias=key
storeFile=/Users/denganzhi/key.jks

3. /android/app/build.gradle
添加： 
def keystorePropertiesFile = rootProject.file(“key.properties”)
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

4.  把 build.gradle
buildTypes {
    release {
        signingConfig signingConfigs.debug
    }
}
 替换

 signingConfigs {
        release {
            keyAlias keystoreProperties[‘keyAlias’]
            keyPassword keystoreProperties[‘keyPassword’]
            storeFile file(keystoreProperties[‘storeFile’])
            storePassword keystoreProperties[‘storePassword’]
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }

 5. 回到项目根目录： 开始打包 
 flutter build apk