当前位置: 技术文章>> 详细介绍开发工具安装及环境搭建及代码示例

文章标题:详细介绍开发工具安装及环境搭建及代码示例
  • 文章分类: 后端
  • 10786 阅读
文章标签: flutter

Flutter 开发工具的安装和环境搭建可以按照以下步骤进行:

  1. 下载 Flutter SDK:前往 Flutter 官网(https://flutter.dev/),选择适合自己系统的版本 SDK,并下载到本地。

  2. 配置系统环境:将 Flutter SDK 的路径添加到系统的环境变量中。具体方法为:在系统环境变量中添加 Flutter SDK 的 bin 文件夹路径。

  3. 安装 Flutter:在刚才下载的 Flutter SDK 文件中找到 flutter_console.bat 文件,双击打开进入 Flutter 的命令行界面,输入 flutter doctor 命令,等待一会如果出现连接超时,输入两条指令,配置到国内的服务器进行下载。第一条命令为:setPUB_HOSTED_URL=https://pub.flutter-io.cn,第二条命令为:setFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn。输入 flutteer –v 命令查看 Flutter 版本号,如果显示版本号则表示安装成功。

  4. 创建 Flutter 项目:打开 Android Studio,选择 New Flutter Project,然后在 Flutter SDK path 填入刚才所下载的 SDK 地址,点击 next,填入项目名称、项目地址、项目类型、Android 和 IOS 的开发语言以及需要跨平台的平台。

  5. 在 IOS 上运行:当创建完成后,系统会自动有一个默认项目,如果需要在使用 iOS 模拟器或者 iPhone 真机上运行,需要打开 XCode,将自己的电脑和 xcode 绑定,第一次连接 iPhone 真机时,还需在手机上点击信任此链接。绑定成功后,点击 Android Studio 如下链接,会跳转到 xcode。添入自己的 appid 与本机进行绑定即可。

以下是使用 Flutter 开发工具创建一个简单应用程序的示例代码:


import 'package:flutter/material.dart';



void main() {

runApp(MyApp());

}



class MyApp extends StatelessWidget {

@override  

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(),

);

}

}



class MyHomePage extends StatefulWidget {

@override  

_MyHomePageState createState() => _MyHomePageState();

}



class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;



void _incrementCounter() {

setState(() {

_counter++;

});

}



@override  

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Flutter Demo Home Page'),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

'You have pushed the button this many times:',

),

Text(

'$_counter',

style: Theme.of(context).textTheme.headline4,

),

],

),

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: Icon(Icons.add),

), // This trailing comma makes auto-formatting happy and do not generate E-tag without it  

); // This trailing comma makes auto-formatting happy and do not generate E-tag without it  

}

}


推荐文章