共计 7495 个字符,预计需要花费 19 分钟才能阅读完成。
原文
https://medium.com/flutterdev…
代码
https://github.com/flutter-de…
参考
- https://flutter.dev/docs/get-…
注释
理解如何设置运行桌面上的应用程序在您的 Flutter 应用程序
在 Flutter 中,Flutter 应用程序屏幕上的每个组件都是一个小工具。屏幕的透视图齐全依赖于用于构建应用程序的小部件的抉择和分组。此外,利用程序代码的构造是一个小部件树。
在这个博客中,咱们将理解如何在桌面上运行 Flutter 应用程序,以及设置这个应用程序的要求是什么?. 咱们将看到一步一步的流程,并创立一个应用程序来了解桌面应用程序的构建过程。
Flutter :
“Flutter 是谷歌的 UI 工具包,它能够帮忙你在创纪录的工夫内用一个代码库为挪动设施、网络和桌面构建丑陋的本地组合应用程序。”
它是收费和开源的。它最后是由谷歌倒退而来,目前由 ECMA 规范监管。Flutter 应用程序利用 Dart 编程语言来制作应用程序。这个 dart 编程和其余编程语言有一些雷同的亮点,比方 Kotlin 和 Swift,并且能够被转换成 JavaScript 代码。
Flutter 的益处:
Flutter 为咱们提供了在多个平台上运行应用程序的机会。比方,网络,桌面,Android/iOS。市场上有许多语言能够在多种平台上运行应用程序。但与其余语言相比,flutter 在不同平台上运行应用程序所需的工夫更少。因为 flutter 不像其余语言那样应用 mediator 桥来运行应用程序。因而,在不同的平台上运行应用程序时,Flutter 速度很快。上面是一些关键点
所有平台中雷同的用户界面和业务逻辑。
缩小代码和开发工夫。
相似于本地应用程序的性能。
自定义,动画 UI 可用于任何简单的小部件。
本人的渲染图形引擎,即 skia。
简略的平台专用逻辑实现。
超过手机的潜在能力。
Flutter 平台特定的规范:
特定于 Android 平台
特定于 iOS 平台
特定于 Web 平台
桌面平台专用
为桌面平台上运行的应用程序设置特定:
- 首先,创立您的 Flutter 我的项目
- 而后将你的频道切换到贝塔 Flutter 频道。因为它涵盖了桌面反对,在 Beta 版本中能够应用,并且在 Beta 头条大新闻中能够应用这个命令。
> flutter channel beta Flutter
转到 flutter 文档,点击窗口设置选项,浏览文档。
https://flutter.dev/docs/get-…
- 而后应用这个命令启用你的窗口。
> flutter config — enable-windows-desktop
查看上面的文档
https://flutter.dev/docs/get-…
- 启用窗口后 重新启动 android studio。
- 重新启动 android studio 之后,当初应用上面的命令创立 windows 反对目录。
> flutter create.
- 当初装置 visual studio 去这个链接。
https://visualstudio.microsof…
- 在 visual studio 装置后,你终于能够在桌面上运行你的利用了。抉择桌面设施在你的
android studio
和运行应用程序。
实施方案:
当初我正在设计一个在桌面上测试的页面。你能够在桌面上运行任何应用程序。我在这里展现的只是这个应用程序的最初一个页面代码实现,它是代码片段。如果你想查看残缺的代码,请拜访上面给出的 Github 链接。
在这个网页上,我正在设计一个课程列表卡与图像和文字为购买课程列表。
import 'package:e_learning_app/constants/constants.dart';
import 'package:e_learning_app/model/Courses_items_model.dart';
import 'package:e_learning_app/model/read_blog_model.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:io' show Platform;
class ReadScreenView extends StatefulWidget {const ReadScreenView({Key? key}) : super(key: key);
@override
_ReadScreenViewState createState() => _ReadScreenViewState();
}
class _ReadScreenViewState extends State<ReadScreenView> {
@override
Widget build(BuildContext context) {
return Scaffold(body: _buildBody(),
);
}
Widget _buildBody() {
return Container(height: MediaQuery._of_(context).size.height,
child: Stack(
children: [
Container(height: MediaQuery._of_(context).size.height,
_//color: Colors.cyan,_ child: Container(margin: EdgeInsets.only(bottom: 350),
height: 250,
decoration: BoxDecoration(color: Color(0xffff9b57),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40),
bottomRight: Radius.circular(40))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(
left: 20,
right: 20,
top: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(onTap:(){Navigator._pop_(context);
},
child: Container(_//margin: EdgeInsets.only(right: 25,top: 10),_ height: 30,
width: 30,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),
color: Color(0xfff3ac7c),
),
child: Icon(
Icons._arrow_back_,
color: Colors._white_,
size: 20,
),
),
),
Container(_// margin: EdgeInsets.only(right: 25,top: 10),_ height: 30,
width: 30,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(5),
color: Color(0xfff3ac7c),
),
child: Icon(
Icons._menu_,
color: Colors._white_,
size: 20,
),
),
])),
Container(padding: EdgeInsets.only(left: 20, right: 20, top: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
"Purchase Courses",
style: TextStyle(
color: Colors._white_,
fontSize: 20,
_//fontWeight: FontWeight.bold_ ),
),
),
SizedBox(height: 5,),
Container(
child: Text(
"Categories",
style: TextStyle(
color: Colors._white_,
fontSize: 12,
_//fontWeight: FontWeight.bold_ ),
),
),
],
),
),
Container(padding: EdgeInsets.only(left: 20, top: 16),
height: 140,
alignment: Alignment._center_,
_//color: Colors.orange,_ child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: readBlogList.length,
itemBuilder: (BuildContext context, int index) {return _buildCategorySection(readBlogList[index]);
}),
),
],
),
),
),
Positioned(
top: 260,
left: 0,
right: 0,
bottom: 0,
child: SizedBox(height: MediaQuery._of_(context).size.height - 260,
width: MediaQuery._of_(context).size.width,
child: Container(_//color: Colors.yellow,_ padding: EdgeInsets.only(left: 4, right: 4),
width: MediaQuery._of_(context).size.width,
child: ListView.builder(_//physics: NeverScrollableScrollPhysics(),_ scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: readBlogList.length,
itemBuilder: (BuildContext context, int index) {return _buildPurchaseCourses(readBlogList[index]);
}),
),
),
),
Positioned(
bottom: 0,
child: Container(
padding:
EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 10),
height: 70,
width: MediaQuery._of_(context).size.width,
color: Colors._white_,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Purchase Courses",
style: TextStyle(
color: Colors._black_,
fontSize: 14,
_//fontWeight: FontWeight.bold_ ),
),
Text(
"5",
style: TextStyle(
color: Colors._red_,
fontSize: 20,
_//fontWeight: FontWeight.bold_ ),
),
],
),
Container(
height: 40,
width: 130,
margin: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Color(0xffdc4651)),
child: Container(padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Category",
style: TextStyle(color: Colors._white_),
),
Icon(Icons._arrow_drop_down_, color: Colors._white_)
],
),
),
)
],
),
),
),
],
),
);
}
Widget _buildCategorySection(ReadBlogModel readBlogList) {
return Container(
height: 50,
width: 110,
child: Card(
color: Colors._white_,
child: Column(
_//mainAxisAlignment: MainAxisAlignment.spaceBetween,_ children: [
Container(
height: 90,
child: ClipRRect(borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5)),
child: Image.network(
readBlogList.image!,
fit: BoxFit.fill,
height: 50,
width: 110,
),
)),
Container(padding: EdgeInsets.all(5),
child: Text(
"Categories",
style: TextStyle(
color: Colors._black_,
fontSize: 12,
_//fontWeight: FontWeight.bold_ ),
),
),
],
),
),
);
}
Widget _buildPurchaseCourses(ReadBlogModel readBlogList) {
return Container(margin: EdgeInsets.only(left: 10, right: 10),
_//padding: EdgeInsets.only(left: 10,right: 20),_ height: 80,
child: Card(
child: Container(padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 40,
width: 40,
child: ClipRRect(
child: Image.network(
readBlogList.image!,
fit: BoxFit.fill,
),
borderRadius: BorderRadius.circular(8),
),
),
_//SizedBox(width: 20,),_ Container(padding: EdgeInsets.only(right: 120),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
readBlogList.title!,
style: TextStyle(
fontSize: 12,
_//fontWeight: FontWeight.bold_ ),
),
Text(
readBlogList.subTitle!,
style: TextStyle(
fontSize: 12,
_//fontWeight: FontWeight.bold_ ),
),
],
),
),
_// SizedBox(width: 130,),_ Container(
height: 30,
width: 30,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Color(0xfffee8db),
),
child: Icon(
Icons._done_,
color: Color(0xffdd8e8d),
size: 16,
),
)
],
),
),
));
}
}
当咱们运行应用程序,咱们应该失去屏幕的输入像上面的屏幕视频。
结语:
在本文中,我曾经简略地解释了桌面应用程序的设置。
GitHub Link:
https://github.com/flutter-de…
© 猫哥
- https://ducafecat.tech/
- https://github.com/ducafecat
- 微信群 ducafecat
- b 站 https://space.bilibili.com/40…
往期
开源
GetX Quick Start
https://github.com/ducafecat/…
新闻客户端
https://github.com/ducafecat/…
strapi 手册译文
https://getstrapi.cn
微信探讨群 ducafecat
系列汇合
译文
https://ducafecat.tech/catego…
开源我的项目
https://ducafecat.tech/catego…
Dart 编程语言根底
https://space.bilibili.com/40…
Flutter 零根底入门
https://space.bilibili.com/40…
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40…
Flutter 组件开发
https://space.bilibili.com/40…
Flutter Bloc
https://space.bilibili.com/40…
Flutter Getx4
https://space.bilibili.com/40…
Docker Yapi
https://space.bilibili.com/40…