5分钟学会Flutter开发

    

     git clone https://github.com/flutter/flutter.git
    

    

     # FLUTTER_HOME为下载的Flutter文件夹路径export FLUTTER_HOME=/Users/.../flutterexport PATH=$PATH:$FLUTTER_HOME/binexport PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
    

    

     source ~/.bash_profilesource ~/.zshrc（如安装zsh插件）
    

    

     cd /Applications/Android\ Studio.app/Contents/jreln -s ../jre jdkln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdkflutter doctor
    

    

     flutter create xxx
    

    

     create --template module xxx
    

    

     bd_flutter  .dart_tool.............记录依赖库信息  .idea..................当前项目配置  android................Android工程目录  iOS....................iOS工程目录  lib....................Flutter代码目录  test...................单元测试目录  web....................Web工程目录  pubspec.yaml...........Pub第三方依赖配置文件，类似Cocoapods、Gradle
    

    

     //Text -> StatelessWidget -> Widget
class Text extends StatelessWidget {}abstract class StatelessWidget extends Widget {StatelessElement createElement() => StatelessElement(this);}abstract class Widget extends DiagnosticableTree {Element createElement(); // 创建element抽象方法}
    

    

     //Column -> Flex -> MultiChildRenderObjectWidget - > RenderObjectWidget -> Widgetclass Column extends Flex {}class Flex extends MultiChildRenderObjectWidget {// ⽅法实现RenderFlex createRenderObject(BuildContext context) {//返回RenderFlexreturn RenderFlex -> RenderBox -> RenderObject} }abstract class MultiChildRenderObjectWidget extends RenderObjectWidget {}abstract class RenderObjectWidget extends Widget {RenderObjectElement createElement();RenderObject createRenderObject(BuildContext context); // 抽象⽅法-创建RenderObjectvoid updateRenderObject(BuildContext context, covariant RenderObject renderObject) {}void didUnmountRenderObject(covariant RenderObject renderObject) { }}abstract class Widget extends DiagnosticableTree {Element createElement(); // 抽象⽅法-创建element}class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox,FlexParentData>, RenderBoxContainerDefaultsMixin<RenderBox,FlexParentData>, DebugOverflowIndicatorMixin {}abstract class RenderBox extends RenderObject {}
    

    

     /*Flutter代码*/static const platform = const MethodChannel("leo.com/getudid");void getUDID() async {final result = await platform.invokeMethod("nativeGetUDID"); // 要调⽤的⽅法// final result = await platform.invokeMethod("nativeGetUDID",["flutter参数"]);setState(() {_udid = result; });}

    

    

     /*iOS代码*/// 1.获取FlutterViewControllerlet controller: FlutterViewController = window.rootViewController as!FlutterViewController;// 2.创建FlutterMethodChannel，跟controller⼆进制消息通信let channel = FlutterMethodChannel(name: "leo.com/getudid", binaryMessenger:controller.binaryMessenger);// 3.监听channel调⽤⽅法，当flutter调⽤nativeGetUDID的时候调⽤channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escapingFlutterResult) in// 1.判断当前是否是nativeGetUDIDguard call.method == "nativeGetUDID" else {result(FlutterMethodNotImplemented); // 报⼀个没有⽅法的错误return; }call.arguments; //传递过来的参数// 2.获取UDIDlet udid = "xxxx-xxxx-xxxx-xxxx"result(udid) //回调值}
    

    

     /*Android代码*/private val CHANNEL = "leo.com/getudid"override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {GeneratedPluginRegistrant.registerWith(flutterEngine);// 1.创建MethodChannel对象val methodChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger,CHANNEL)// 2.添加调⽤⽅法的回调methodChannel.setMethodCallHandler {// Note: this method is invoked on the main thread.call, result ->// 2.1.如果调⽤的⽅法是nativeGetUDID,那么正常执⾏if (call.method == "nativeGetUDID") {// 2.1.1.调⽤另外⼀个⾃定义⽅法回去电量信息val udid = "xxxx-xxxx-xxxx-xxxx";result.success(udid) } else {//⽅法找不到，回调notImplementedresult.notImplemented() } }}
    

    

     create --template module native_add_flutter
    

    

     // CocoaPods集成flutter_application_path = '../native_add_flutter'load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)
    

    

     // 初始化Flutter引擎 , 为引擎起名为leolet flutterEngine:FlutterEngine = FlutterEngine(name: "leo");// 启动flutter引擎，默认函数⼊⼝为mainflutterEngine.run();let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil);flutterVC.modalPresentationStyle = .fullScreen;self.present(flutterVC, animated: true, completion: nil);
    

    

     // 在gradle进⾏配置// 创建Android项⽬、添加相关的依赖// 1、修改Android项⽬settings.gradlesetBinding(new Binding([gradle: this])) // newevaluate(new File( // newsettingsDir.parentFile, // new'native_add_flutter/.android/include_flutter.groovy' // new))include ':native_add_flutter'project(':native_add_flutter').projectDir = new File('../native_add_flutter')// 2、配置Android项⽬的build.gradledependencies { ...implementation project(':flutter') //增加flutter依赖}// 3、AndroidManifest.xml配置<activity android:name="io.flutter.embedding.android.FlutterActivity"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize"/>
    

    

     import io.flutter.embedding.android.FlutterActivity;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);startActivity(FlutterActivity.createDefaultIntent(this) ); }}
    

    

     // 导⼊类import 'package:flutter/material.dart';//⼊⼝函数，程序加载时调⽤void main() {runApp(MyApp()); //调⽤runApp⽅法，并初始化MyApp}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) { //初始化会调⽤build⽅法return MaterialApp( //Material为Google的⼀种UI⻛格，MaterialApp可为项⽬配置App标题、主题等title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue, ),home: MyHomePage(title: 'Flutter Demo Home Page'), //设置主⻚为MyHomePage ); }}//由于点击需要更改Text显示,所以此处继承StatefulWidgetclass MyHomePage extends StatefulWidget {MyHomePage({Key? key, required this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@override_MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;//下的按钮的点击事件void _incrementCounter() {// setState会标记需要刷新UIsetState(() {// This call to setState tells the Flutter framework that something has// changed in this State, which causes it to rerun the build method below// so that the display can reflect the updated values. If we changed// _counter without calling setState(), then the build method would not be// called again, and so nothing would appear to happen._counter++; //点击按钮时候，counter+1, 并⾃动更新UI显示 }); }@overrideWidget build(BuildContext context) {// This method is rerun every time setState is called, for instance as done// by the _incrementCounter method above.//// The Flutter framework has been optimized to make rerunning build methods// fast, so that you can just rebuild anything that needs updating rather// than having to individually change instances of widgets.return Scaffold(appBar: AppBar( //配置导航// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title), ),body: Center( //配置布局显示在中⼼// Center is a layout widget. It takes a single child and positions it// in the middle of the parent.child: Column( //⼀种竖向布局⽅式，相当于listview// Column is also a layout widget. It takes a list of children and// arranges them vertically. By default, it sizes itself to fit its// children horizontally, and tries to be as tall as its parent.//// Invoke "debug painting" (press "p" in the console, choose the// "Toggle Debug Paint" action from the Flutter Inspector in Android// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)// to see the wireframe for each widget.//// Column has various properties to control how it sizes itself and// how it positions its children. Here we use mainAxisAlignment to// center the children vertically; the main axis here is the vertical// axis because Columns are vertical (the cross axis would be// horizontal).mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ //返回多个widget数组，Text('You have pushed the button this many times:', ),Text( '$_counter',//显示_counter的值style: Theme.of(context).textTheme.headline4,//显示样式，使⽤主题的headline4显示 ), ], ), ),floatingActionButton: FloatingActionButton( //⼀个可点击的按钮，固定在右下⻆onPressed: _incrementCounter, //点击事件tooltip: 'Increment',child: Icon(Icons.add), //按钮显示为内部⾃带的add图⽚ ), // This trailing comma makes auto-formatting nicer for build methods.  ); }}