| Mac配置flutter环境 ，原生项目接入flutter | 您所在的位置：网站首页 › idea配置flutter › Mac配置flutter环境 ，原生项目接入flutter |
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
- (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 ，创建新项目，并运行  
|
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |