【腾讯云 Cloud Studio 实战训练营】尝鲜体验Flutter编写一个App应用

简介: 欢迎参加腾讯云 Cloud Studio 实战训练营!在本次训练营中,我们将通过App项目入口说明,基本文件说明,基础框架搭建,带您一步步编写一个基于 Flutter 的静态App系统。无论您是初学者还是有一定编程经验的开发者,本训练营都将为您提供一个深入了解和掌握 Flutter 技术以及App开发的机会。使用 Flutter作为UI框架,我们将能够充分利用其强大的功能和优势,快速搭建一个高效、可扩展的App系统。Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

文章目录
前言
一、开发工具以及语言框架
1、Cloud Studio 开发工具
2、Flutter (UI)框架
3、Dart 开发语言
二、准备工作
1、登录(注册)Cloud Studio 账号
2、进入 Cloud Studio 控制台
3、配置工作空间参数
4、确认并创建工作空间
三、项目搭建
1、已有文件说明
2、App入口说明及修改
3、App框架搭建
4、App页面搭建
四、项目页面效果展示
五、总结
六、资源

前言
欢迎参加腾讯云 Cloud Studio 实战训练营!在本次训练营中,我们将通过App项目入口说明,基本文件说明,基础框架搭建,带您一步步编写一个基于 Flutter 的静态App系统。无论您是初学者还是有一定编程经验的开发者,本训练营都将为您提供一个深入了解和掌握 Flutter 技术以及App开发的机会。
使用 Flutter作为UI框架,我们将能够充分利用其强大的功能和优势,快速搭建一个高效、可扩展的App系统。Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

本次体验中,我们将了解到:
1、Cloud Studio 开发工具
2、Flutter (UI)框架
3、Dart语言
4、App入口讲解
5、App项目搭建
6、App效果展示
7、Cloud Studio 优缺点

一、开发工具以及语言框架
1、Cloud Studio 开发工具
Cloud Studio是CODING自主研发的在线IDE集成开发环境。用户可以通过Cloud Studio创建项目的工作空间,进行在线编程、开发、调试等操作。Cloud Studio还提供可分享的在线IDE开发环境功能。Cloud Studio 适用于开发 Html5,Python,Ruby 等环境不是太复杂的轻型项目,或者临时修改大型项目的少量代码。
2、Flutter (UI)框架
Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。 [5]Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。
3、Dart 开发语言
Dart是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)认定为标准。 它被用于web、服务器、移动应用和物联网等领域的开发。它是宽松开源许可证(修改的BSD证书)下的开源软件。Dart 也是 Flutter 的基础。 Dart 作为 Flutter 应用程序的编程语言,为驱动应用运行提供了环境,同时 Dart 还支持许多核心的开发任务,例如格式化,分析和代码测试。
二、准备工作
通过以下步骤,我们可以搭建出自己的工作空间。
1、登录(注册)Cloud Studio 账号
打开Cloud Studio网址(https://cloudstudio.net/),进行登录注册。
af0ea1735c6f4fc2b273c5f203c1735f.jpeg
2、进入 Cloud Studio 控制台
点击左下角红色⭕️部分,创建工作空间。

666c832b37ab4129aeeb173a3da13e48.jpeg

3、配置工作空间参数
在弹出的创建工作空间窗口中,您需要进行以下配置:

空间名称
空间描述
工作类别
代码来源
开发环境
规格配置

945b8049a35f42b1a719c2000d5e537e.jpeg
4、确认并创建工作空间
完成上述配置后,点击 “创建” 按钮确认创建新的工作空间。

2e15a034a6a145c598898b2b15dc1564.jpeg

三、项目搭建
1、已有文件说明
这里我们会对已有文件进行说明
首先我们来看一下原有目录结构:

0ba3dd5035e44a228ce45845750d82d6.jpeg
在这里,进行了一些重要内容的标注,我们一一分析:

1、首先红色标记的部分,是Flutter目前所支持的平台,手机端(android 和 ios)和电脑端(web 和 macos)都可以进行支持。Flutter属于跨平台开发,一套代码,多端运行,极大的节约了开发的成本,同时极大的提升了开发的效率。

2、黄色标记的部分,是项目的三方包配置文件,所有导入的三方包链接放在此处,然后进行更新即可。

3、紫色标记的部分,这是最重点的地方,也就是咱们要编写代码的地方了,所有的代码文件放在此处即可。可以创建多个文件夹进行模块的分类。

另外,我们需要配置一下Flutter和Dart的环境支持
ec3f21cb3e7f482da1839c85155f2ab8.jpeg
此处,只需要点击“安装”,如果已经安装,重新加载一下即可。(线上环境都是配置好的,只需要加载一下即可)。

2、App入口说明及修改
这里将会介绍App的入口以及对入口的修改
首先看下图,main.dart 文件是整个“项目”文件的入口。
56885bc3953740fea084180b82fdb42c.jpeg
我们可以看到图中有大量的 .dart 文件,这是系统给我们预设的一些颜色、字体、等等配置文件,此时我们不需要这些文件的存在,下面简化一下这个文件目录页面。
1931ec8b3594479dae555644b41a648d.jpeg
此处我们可以看到,此时的目录文件只剩下main.dart文件,并且 main.dart文件中代码也进行了简化,代码如下:
```import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State createState() => _MyAppState();
}

class _MyAppState extends State {

@override
initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(),
);
}
}


至此,我们完成了项目的简化,此时项目中只剩下最简单且必要的入口部分了,我们可以放心大胆的且愉快的进行开发了~~,赶紧实操起来呀。

**3、App框架搭建**
接下来我们来搭建一个简单的项目框架
1、我们来创建三个页面 home_page.dart 页面、second_page.dart页面 、my_page.dart页面 以及一个底部导航页面btm_navbar.dart。如下图:

![a34f9945f41d49e186764d36cac92b6a.jpeg](https://ucc.alicdn.com/pic/developer-ecology/y4u5ifjcbptla_3c8d1d50d5d045788f46759e91bc1f55.jpeg)
注意:Flutter当中页面都是 dart 文件,也就是Flutter的宗旨:万物皆可widget(可以理解成页面、窗口、组成部分)。
此时,我们主要对main.dart 和 btm_navbar.dart文件进行修改:

main.dart修改如下:
```import 'package:flutter/material.dart';
import 'package:material_3_demo/btm_navbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BtmNavBarPage(),
    );
  }
}

btm_navbar.dart修改如下:

```import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'home_part/home_page.dart';
import 'second_part/second_page.dart';
import 'my_part/my_page.dart';

class BtmNavBarPage extends StatefulWidget {
const BtmNavBarPage({Key? key}) : super(key: key);

@override
State createState() => _BtmNavBarPageState();
}

class _BtmNavBarPageState extends State {

final List bottomTabs = [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home,color: Colors.grey,),
activeIcon: Icon(CupertinoIcons.home,color: Colors.pink,),
label: "首页",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.search,color: Colors.grey,),
activeIcon: Icon(CupertinoIcons.search,color: Colors.pink,),
label: "手册",
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled,color: Colors.grey,),
activeIcon: Icon(CupertinoIcons.profile_circled,color: Colors.pink,),
label: "我的",

),

];

final List tabBodies = [
HomePage(),
SecondPage(),
MyPage(),
];

int currentIndex = 0;
var currentPage;

@override
void initState() {
super.initState();
currentPage = tabBodies[currentIndex];
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 13,
unselectedFontSize: 13,
selectedItemColor: Colors.pink,
unselectedItemColor: Colors.grey,
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
items: bottomTabs,
onTap: (index){
setState(() {
currentIndex = index;
currentPage = tabBodies[currentIndex];
});
},
),
body: currentPage,
);
}
}


至此我们便完成了一个简单的框架,效果图如下:

![2e7dd31972394fb1aa96eadc9d8b236c.jpeg](https://ucc.alicdn.com/pic/developer-ecology/y4u5ifjcbptla_b1c4258399b642528c81e8171da686a0.jpeg)
接下来我们便可以搭建具体的页面了。

**4、App页面搭建**
我们来搭建第一个页面:home_page.dart :

```import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        child: Column(
          children: [
            topPart(),
            CenterPart(),
          ],
        ),
      ),
    );
  }

  Widget topPart() {
    return Container(
      child: Image.asset(
        "../assets/cs.png",
        width: MediaQuery.of(context).size.width,
        fit: BoxFit.cover,
      ),
    );
  }

  Widget CenterPart() {
    return Container(
      child: ListView.builder(
          itemCount: 3,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return itemPart(index);
          }),
    );
  }

  Widget itemPart(int index) {
    String strTit = "";
    String strDet = "";
    String strImg = "";

    if (index == 0) {
      strTit = "Cloud Studio 简介";
      strDet =
          "Cloud Studio是CODING自主研发的在线IDE集成开发环境,用户可以通过Cloud Studio创建项目的工作空间,进行在线编程、开发、调试等操作。Cloud Studio还提供可分享的在线IDE开发环境功能。";
      strImg = "../assets/colud_studio.png";
    } else if (index == 1) {
      strTit = "Flutter 简介";
      strDet =
          "Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作,在全世界,Flutter正在被越来越多的开发者和组织使用。";
      strImg = "../assets/flutter.png";
    } else if (index == 2) {
      strTit = "Dart 简介";
      strDet =
          "Dart是一种基于类的可选类型化编程语言,设计用于创建Web应用程序,Google称,Dart的设计目标是为Web编程创造结构化但又富有灵活性的语言。";
      strImg = "../assets/dart.png";
    }

    return Column(
      children: [
        Container(
          child: Row(
            children: [
              Container(
                padding: EdgeInsets.all(10),
                child: Image.asset(
                  "${strImg}",
                  width: 80,
                  height: 80,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 25,
                      child: Text(
                        "${strTit}",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w700),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(right: 10),
                      height: 55,
                      width: MediaQuery.of(context).size.width - 115,
                      child: Text(
                        "${strDet}",
                        style: TextStyle(fontSize: 11, color: Colors.grey),
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(height: 0.5, color: Color.fromARGB(255, 140, 137, 137))
      ],
    );
  }
}

效果图如下:

35537e3bee334b509a526565ac1dd867.jpeg
需要注意的是,这时我们需要添加一些图片,新建一个文件夹assets,然后在配置文件中pubspec.yaml添加配置,代码如下:

  A Flutter project showcasing supported Material 3 components, typography, color system and elevation.
  Supports different light/dark mode, color seed, and comparison to Material 2.

publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ">=2.17.0-0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.1

flutter:
  uses-material-design: true

  assets:
    - assets/

图片添加位置如下:
9f29d0a805cb481785a16af2c2bf240d.jpeg

至此,我们就完成了页面的搭建。

四、项目页面效果展示
下面我们来看一下效果图:
f2e38291c53f45b5931773427be28b64.jpeg
0eb4d38fb5f247079722f07db336f25b.jpeg
至此,我们可以看到一个简单的雏形。

五、总结
优点:

Cloud Studio作为云端开发工具,极大的提升了了用户的开发效率,像登录QQ、微信一样简单的打开开发工具,速度快,效率高。
极大的解决了我们对于环境配置带来与生俱来的恐惧,配置环境,伤筋动骨。Cloud Studio自动配置环境,极好。
新颖,创新,也是突破。
优化电脑空间,再也不用因为配置不足而各种卡顿等等不好的体验。
缺点:

对于手机端开发,真机调试是非常不友好的,在不打包的情况下,无法进行真机调试。
开发中,对于扫码打开的页面点击效果和滑动效果体验极差。
不能进行打印,这是我万万不能接受的,或者是我还没有找到打印的方法,但是对于体验,极其不佳,会继续查找体验方法。
快捷指令的操作无法使用,这个是非常让人抓狂的存在,或许我还没探索到,欢迎指正交流。
文档少,社区少,生态少,需要大家共同努力,一起造轮子。
不知道后续会不会付费使用,嘻嘻。
六、资源
回头会附上资源链接,烦请大家,一键三连,关注、点赞、评论。感谢。

相关文章
|
12天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
12天前
|
Java Android开发
Rockchip系列之CAN APP测试应用实现(4)
Rockchip系列之CAN APP测试应用实现(4)
27 1
|
12天前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
12天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
|
12天前
|
开发框架 前端开发 Android开发
专刊:随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利
【4月更文挑战第27天】在数字化时代,移动App变得不可或缺,而在线生成App的技术正逐渐兴起,为开发者提供快捷创建移动应用的途径。本文探讨了网页到App的转变过程,介绍了WebView嵌入、混合式开发框架和云端打包技术等方法,以及在线生成App的步骤、优势和挑战。虽然存在性能和功能限制,但随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利。
|
3天前
|
安全 定位技术 网络安全
禁止应用在模拟器上运行的方案及app安全问题
禁止应用在模拟器上运行的方案及app安全问题
10 1
|
4天前
|
存储 数据安全/隐私保护 iOS开发
应用在App Store上被拒重新提交审核流程指南
该文本是关于iOS应用发布的步骤说明
11 2
|
5天前
|
监控 数据库 数据安全/隐私保护
第三方授权的应用苹果审核被驳回解决方案和app版本更新
第三方授权的应用苹果审核被驳回解决方案和app版本更新
13 0
|
6天前
|
定位技术 开发工具 iOS开发
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
10 0
|
12天前
|
XML 开发框架 .NET
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
21 1