Mac配置flutter环境 ，原生项目接入flutter
原创
1.下载flutter SDK
https://flutter.cn/docs/development/tools/sdk/releases
2.安装和配置 Flutter 开发环境
配置
flutter的 PATH 环境变量(当前窗口生效)： 这个命令配置了PATH环境变量，且只会在你 当前 命令行窗口中生效。如果想让它永久生效，请查看 更新 PATH 环境变量。
export PATH="$PATH:`pwd`/flutter/bin"运行 flutter doctor 命令 通过运行以下命令来查看当前环境是否需要安装其他的依赖（如果想查看更详细的输出，增加一个 -v 参数即可）：
这个命令会检查你当前的配置环境，并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK，所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告，看看别漏了一些需要安装的依赖，或者需要之后执行的命令（这个会以 加粗的文本 显示出来）。
flutter doctor安装配置遇到的问题：
处理办法：
到idea - plugin 中下载安装dart和Flutter，重启idea ，然后终端重新执行 flutter doctor
正常的运行结果
3. 混合开发接入
结构图示 (本人项目使用了CocoaPods )
1) 在项目文件夹同级目录创建Flutter模块（Flutter相关页面的代码都在这里）。
打开终端 cd 到Flutter测试文件夹 flutter create --template module my_flutter
2) Podfile 添加下面代码（ my_flutter是模块文件夹名称），然后cd 到 项目文件夹 执行 pod install
##Flutter工程路径
#flutter_application_path = '../my_flutter'
##读取 podhelper.rb 的Ruby代码在当前目录执行
#eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)
3) 编译一下如果没有问题，添加代码
在控制器导入 #import <Flutter/Flutter.h>
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"加载Flutter" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(100, 100, 160, 60);
[self.view addSubview:button];
}
- (void)handleButtonAction{
FlutterViewController *flutterViewController =[FlutterViewController new];
flutterViewController.title = @"flutterTitle";
// //设置路由参数
// [flutterViewController setInitialRoute:@"route"];
// [self presentViewController:flutterViewController animated:false completion:nil];
[self.navigationController pushViewController:flutterViewController animated:YES];
}4) 运行结果：
第一个界面
点击按钮跳转之后的flutter界面
5) 修改模块的默认代码，位置： my_flutter - lib- main.dart ，替换为下面代码
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}6) 运行项目， 点击按钮
idea 配置Flutter ，创建新项目，并运行
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录