flutter开发桌面应用
我要告诉你一个秘密：多年来，我讨厌移动开发。 我想喜欢它-移动就是未来！ 这很酷！ 那是低功率！ 这是与首次接触计算机而不是传统台式机平台的用户建立联系的一种方式！ 但是……对我来说，发展是一个缓慢而令人沮丧的经历。 取而代之的是，我把自己束缚在完全无问题的Web开发领域中，并对HTML blink标记（填充）的消失表示哀悼。
然后，我发现了Flutter ，这是Google开发的开源移动应用SDK，使开发人员可以使用相同的代码库为iOS和Android创建移动应用。
找到Flutter之后，我发现移动开发可能很有趣 。
是的，快乐。
你怎么问？ 为了说明您的意思，让我们逐步编写一个查询Stack Overflow的非常简单的Flutter应用程序。 作为您自重的开源开发人员，我确定您想在人们对Stack Overflow上的软件提出的问题上保持关注。 这个应用程式可让您搜寻有关特定主题的问题。
闪电般的开发周期
Flutter将这一快速发展的想法进一步迈进了一步：“编辑，保存”。 尽管它不是网络技术，但由于Flutter的热重载，您可以在不到一秒钟的时间内在移动设备的屏幕上看到更改。
通常，您可以通过使用精美的动态类型的脚本语言来获得快速的开发周期，其缺点是将错误推送到运行时，而不是在编译时预先捕获它们。 第二个常见的缺点是它们的性能不如编译语言那么活泼。 通过使用Dart作为其首选的编程语言，Flutter可以回避这两个问题。 Dart具有强大的声音类型系统，可让您在演示代码库中那部分内容之前，以不到理想的测试覆盖率发现问题。
其次，Dart具有两种模式：
- 在Dart虚拟机上以“解释”模式运行，从而带来愉悦的热重装体验，并且；
- 编译模式，可在您准备发布应用程序时将其编译为本机代码。
有了这些功能，Dart非常适合为开发人员提供Flutter的出色开发和发布体验。
最后，Dart的设计易于学习，因此，如果您使用过Java，C ++或JavaScript之类的任何C风格的语言，都会感到熟悉。
很酷的功能，例如流和期货
是时候开始编码了！ 我们的应用程序将使用Stack Overflow API查找有关Flutter的问题，这些问题需要响应，以便您（您是一个勇敢的开放源代码项目所有者）可以通过随时向社区提供信息来帮助您的社区。 在Dart中获取该信息的最简单方法是使用异步请求：
final url
=
'https://api.stackexchange.com/2.2/questions?
order=desc&sort=activity&tagged=flutter&site=stackoverflow'
;
var result
= await http.
get
( url
)
;
print
( result.
body
)
;
结果将打印出一些JSON，如下所示：
{
"items"
:
[
{
"tags"
:
[
"android"
,
"ios"
,
"flutter"
]
,
"owner"
:
{
"reputation"
:
1
,
...
}
,
is_answered
:
false
,
"view_count"
:
1337
,
"title"
:
"How to make a pretty Flutter app?"
...
}
在此代码段中， http.get返回一个Future<Request> ，这意味着结果将在(Http)Request类型的将来可用。 即使我们正在往返服务器，也不需要传递回调。 我们可以只使用await关键字来等待响应。 给定Future或Stream的结果，Flutter具有FutureBuilder和StreamBuilder小部件来构建相应的UI组件。
一个Stream就像一个Future ，除了它可以多次异步提供结果，而不仅仅是一次。 在我们的应用程序中，我们将创建一个Stream，可以在其中侦听感兴趣的Stack Overflow问题的更新。 由于Stack Overflow API不提供开箱即用的通知，因此我们使用StreamController构造自己的流，并在获取到它时添加更新的Stack Overflow信息：
final controller
= StreamController
< List
< String
>>
(
)
;
void refreshQuestions
(
) async
{
var result
= await http.
get
( url
)
;
Map decoded
= json.
decode
( result.
body
)
;
List items
= decoded
[
'items'
]
;
controller.
add
( items
.
where
(
( item
)
=>
! item
[
'is_answered'
]
)
.
map
< String
>
(
( item
)
=> item
[
'title'
]
)
.
toList
(
)
)
;
}
在refreshQuestions ，我们对Stack Overflow API进行了新的调用，然后过滤结果，因此我们仅查看未回答的问题。 从这些结果中，我们提取问题的标题以在我们的应用程序中显示它们。
Flutter方便地提供了StreamBuilder小部件，该小部件可以根据流的内容自动更新用户在应用程序中看到的内容。 在这种情况下，我们提供输入流源（ controller.stream ），并根据是否成功接收数据来显示不同的结果（在这种情况下，将构建令人兴奋的Text小部件）。 StreamBuilder还可以方便地取消订阅自己的流，并在之后对其进行清理。
StreamBuilder
(
stream
: controller.
stream
,
builder
:
( BuildContext context
, AsyncSnapshot
< List
< String
>> snapshot
)
{
if
( snapshot.
hasError
)
return Text
(
'Error ${snapshot.error}'
)
;
else
if
( snapshot.
connectionState
== ConnectionState.
waiting
)
{
return Text
(
'Receiving questions...'
)
;
}
return Expanded
(
child
: ListView
(
children
: snapshot.
data
.
map
< Widget
>
(
( info
)
=> Text
( info
)
)
.
toList
(
)
)
)
;
}
)
;
上面代码的结果。 （我不明白为什么没有设计学校会接受我。）
适用于iOS和Android的一项技术
“不要重复自己”是软件工程的普遍口号，但移动开发界似乎对此表示否认。 公司经常会成立独立的iOS和Android应用程序团队，每个团队都需要两次解决相同的问题。 借助Flutter，您可以编写Dart并在本地部署到iOS和Android。 滚动行为，系统字体和其他基本交互组件会自动默认为您所使用的平台。 在更高的级别上，Flutter提供了Cupertino和Material Design小部件库，以使用户在其选择的平台上获得期望的外观。
在我们的Stack Overflow应用程序中，我们希望有一个“获取新结果”按钮，以查看是否有新问题需要我们注意。 我们将编写一个PlatformAdaptiveButton其行为取决于我们在其上运行的平台：
class PlatformAdaptiveButton
extends StatelessWidget
{
final Widget child
;
final Widget icon
;
final VoidCallback onPressed
;
PlatformAdaptiveButton
(
{ Key key
,
this .
child
,
this .
icon
,
this .
onPressed
}
)
:
super
( key
: key
)
;
@ override
Widget build
( BuildContext context
)
{
if
( Theme.
of
( context
) .
platform
== TargetPlatform.
iOS
)
{
return CupertinoButton
(
child
: child
,
onPressed
: onPressed
,
)
;
}
else
{
return FloatingActionButton
(
icon
: icon
,
onPressed
: onPressed
,
)
;
}
}
}
然后，在Flutter应用中，我们可以简单地构造：
return PlatformAdaptiveButton
(
child
:
const Text
(
'Refresh'
)
,
icon
:
const Icon
( Icons.
refresh
)
,
onPressed
: refreshQuestions
)
;
按下时，该请求会从Stack Overflow API请求更新。 Flutter的路线图要求采用更多内置方式在代码中包含平台自适应组件，因此请继续关注。
其他一些应用程序开发系统也提供了跨平台功能：React Native，Xamarin和Ionic等。 使用React Native和Ionic，您可以使用JavaScript进行开发，这可能会降低类型安全性（从而在运行时带来更多意外意外），并且可以对代码进行解释或JIT处理。 使用Xamarin，您可以使用C＃获得强大的类型安全保证，并且根据目标平台的不同，代码可以编译为本机，JIT或在虚拟机上运行。 Flutter可以在iOS和Android上编译为本机代码，从而提供可预测的快速性能。
客制化
“但是艾米丽，”你说。 “我在一家代理商工作，我无法让我创建的所有应用看起来都一样！我需要它们看起来与众不同，并添加那些时髦的风格，例如我的签名，Comic Sans的高雅用法！” 永远不要害怕，我美丽的朋友们。 Flutter确实在这一领域闪耀。
由于Flutter会将每个像素绘制到屏幕上，因此一切都是可自定义的。 不喜欢内置的CupertinoButton的行为方式吗？ 创建一个子类并自己设计。 认为纯色应用栏非常流行吗？ 编写自己的小部件。 在我们的Stack Overflow应用程序中，我编写了一个自定义应用程序栏，它具有自定义字体和渐变配色方案，以将其与所有其他无聊的应用程序栏区分开来-甚至没有太多代码：
@ override
Widget build
( BuildContext context
)
{
final
double statusBarHeight
= MediaQuery.
of
( context
) .
padding .
top
;
return Container
(
padding
: EdgeInsets.
only
( top
: statusBarHeight
)
,
height
: statusBarHeight
*
4
,
child
: Center
(
child
: Text
(
title
,
style
:
const TextStyle
(
color
: Colors.
white
, fontFamily
:
'Kranky'
, fontSize
:
36.0
)
,
)
,
)
,
decoration
: BoxDecoration
(
gradient
: LinearGradient
(
colors
:
[
Colors.
deepOrange
,
Colors.
orangeAccent
,
]
,
)
,
)
,
)
;
}
您可以在下面看到最终结果。
|
|
我为本文编写的所有代码都可以在GitHub的Stack Overflow Viewer上找到。
感兴趣吗？
我们还有很多事情要做！ 但是，进一步的定制留给读者练习……或者是诱使您进入OSCON，我们将从头开始编写一个完全不同的，甚至更有用的，漂亮的开源应用程序爱好者。
Emily Fortuna和Matt Sullivan将在7月16日至19日在俄勒冈州波特兰举行的第20届OSCON年度活动上现场直播Scratch编写的一款精美，性能出色的移动应用程序 。
flutter开发桌面应用
7141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
