初识Flutter——在AS搭建环境及第一个Flutter APP

Flutter中文网
Windows:
打开gitbash,输入:

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=pwd/flutter/bin:$PATH

添加环境变量

转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
在“用户变量”下检查是否有名为“Path”的条目:
如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符
如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
其中,Path中添加的 为flutter\bin的全路径,就是你clone下来的哪个位置。

### Flutter 入门教程与基础使用指南 Flutter 是一种用于构建高性能、高保真度移动应用程序的开源 UI 软件开发工具包 (SDK)[^2]。它允许开发者通过单一代码库创建适用于 Android 和 iOS 的原生应用,极大地提高了开发效率并降低了维护成本。 以下是关于如何学习和掌握 Flutter 基本用法的一些核心知识点: #### 1. 初识 Flutter 开发环境 为了开始使用 Flutter,需要先设置好开发环境。这通常包括安装 Dart SDK、Flutter 工具链以及配置支持 IDE(如 Visual Studio Code 或 IntelliJ IDEA)。具体操作可以参考官方文档中的快速启动指南[^4]。 #### 2. 创建第一个 Flutter 应用程序 当环境搭建完成后,可以通过命令行或者集成开发环境中提供的模板来生成一个新的项目结构。默认情况下会自动生成一个简单的计数器示例应用,该例子展示了最基本的 Widget 结构及其交互逻辑[^3]。 ```bash flutter create my_first_app cd my_first_app flutter run ``` 上述脚本将完成新项目的初始化过程,并立即在连接设备上运行此 App。 #### 3. 理解 Widgets 及其分类 Widget 是构成 Flutter 用户界面的核心组件。它们分为两大类:StatelessWidgets 和 StatefulWidgets。前者表示不可变的小部件;后者则代表具有动态变化能力的大部件[^1]。 - **StatelessWidget**: 不可改变的状态,适合展示固定数据。 - **StatefulWidget**: 支持状态更新,常用来处理用户输入或其他可能随时间而变动的内容。 下面是一个典型的 `StatefulWidget` 实现方式的例子: ```dart class Counter extends StatefulWidget { @override _CounterState createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; void incrementCount() { setState(() { // 更新UI的方法 count++; }); } @override Widget build(BuildContext context) { return Column( children: [ Text('You have pushed the button this many times:'), Text('$count'), // 动态显示数值 ElevatedButton(onPressed: incrementCount, child: Text('Increment')) ], ); } } ``` #### 4. 学习布局机制 Flutter 提供了一系列灵活且强大的布局控件,比如 Row、Column、Stack 等,这些都可以帮助开发者轻松实现复杂的页面设计需求。 例如,利用 `Scaffold` 小部件能够迅速定义整个屏幕的基础架构,其中包括顶部导航栏 (`AppBar`) 和主体区域等内容部分。 ```dart @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("My First App")), body: Center(child: Text("Hello World!")), ); } ``` #### 5. 数据驱动视图&mdash;&mdash;状态管理简介 随着应用复杂性的增加,有效的状态管理模式变得尤为重要。虽然对于小型项目可以直接采用内置的方式进行简单状态控制,但对于大型项目来说,则推荐引入专门的状态管理解决方案,如 Provider 或 Bloc 模式等。 --- ### 总结 通过对以上几个方面的逐步探索,可以从零开始熟悉并掌握 Flutter 的基本功能和技术要点。当然,这只是冰山一角,在实际工作中还需要不断积累经验并通过真实案例加深理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值