用Flutter和Dart编码Android应用

您将要创造的

如果您正在寻找Android应用程序开发的替代方法，则应考虑尝试使用Google的Flutter （一种基于Dart编程语言的框架）。

在外观和性能方面，使用Flutter构建的应用程序与使用Android SDK构建的应用程序在很大程度上没有区别。 而且，只需稍作调整，它们也可以在iOS设备上运行。

在本教程中，我将通过向您展示如何为Android构建简单的小费计算器应用程序，向您介绍Flutter的基础知识。

先决条件

要遵循本教程，您需要：

• 最新版本的IntelliJ IDEA
  
• Android Studio 2.2或更高版本
  
• 运行Android 4.4或更高版本的设备或模拟器
  
• 运行Mac或Linux的计算机
  

1.为什么要使用Flutter？

Flutter创建的用户界面以60 fps的速度运行，其性能远优于其他跨平台开发框架（如React Native和Ionic）创建的用户界面。 如果这没有让您感到兴奋，那么还有一些您可能想要使用Flutter的原因：

1. Flutter使用Dart，一种快速的面向对象的语言，具有多种有用的功能，例如混合包，泛型，隔离和可选的静态类型。
   
2. Flutter具有自己的UI组件，以及在Android和iOS平台上进行渲染的引擎。 这些UI组件中的大多数都开箱即用，符合Material Design的准则。
   
3. Flutter应用程序可以使用IntelliJ IDEA开发，该IDEA与Android Studio非常相似。
   

2.安装Flutter

您可以通过克隆Flutter的GitHub存储库来获取最新版本的Flutter。

git clone https://github.com/flutter/flutter.git

Flutter具有多个依赖项，例如Dart SDK和Material Design字体。 幸运的是，当您第一次运行Flutter的诊断工具时，所有这些工具都会自动安装。

cd flutter/bin
./flutter doctor

为了能够构建Android应用，您还必须将Flutter指向安装Android Studio的目录。

./flutter config --android-studio-dir ~/android-studio

3.配置IntelliJ IDEA

尽管您可以直接使用Flutter的CLI来创建和运行新的应用程序，但是如果使用IDE，您可能会获得更好的开发经验。 Flutter推荐的IDE是IntelliJ IDEA。

但是，在开始使用它开发Flutter应用程序之前，必须同时为Dart和Flutter安装插件。 为此，请从IntelliJ欢迎屏幕中选择配置>插件开始。

在弹出的对话框中，按“ 浏览存储库...”按钮，然后搜索Dart插件。 找到它后，按“ 安装”按钮进行安装。

同样，搜索并安装Flutter插件。

一旦安装了两个插件，请重新启动IntelliJ IDEA。

现在，您必须将Flutter插件指向安装Flutter的目录。 为此，请在欢迎屏幕中选择配置>设置 ，然后在弹出的对话框中，导航至语言和框架> Flutter 。 在Flutter SDK路径字段中，输入目录的绝对路径。

按确定以完成配置。

4.创建一个新项目

要创建新的Flutter项目，请在欢迎屏幕中按“ 创建新项目”按钮。 在“ 新建项目”对话框中，选择Flutter ，然后按“ 下一步” 。

现在，您可以为项目指定一个有意义的名称，然后按Finish 。

生成项目后，建议您按“ 运行”按钮以确保Dart SDK，插件和Flutter框架均已正确配置。 如果是这样，几秒钟后，您应该在设备或仿真器上看到以下屏幕：

请注意，从现在开始，即使在更改代码之后，也不必再次按“ 运行”按钮。 Flutter支持热重载 ，该功能可让您立即将更新推送到应用程序而无需重新启动它。

5.创建小部件

在本教程中，我们将使用以下小部件创建一个小费计算器应用程序：

• 一个TextField接受帐单金额
  
• 一个TextField接受小费百分比
  
• 用户可以按下以计算提示的RaisedButton
  

每个Flutter小部件可以是StatelessWidget或StatefulWidget 。 顾名思义， StatefulWidget具有与之关联的State对象，这不仅使它可以存储数据，而且可以对数据中的更改做出反应。

另一方面， StatelessWidget是一个更简单的对象，不适用于持久存储任何数据。 为了使本教程简短，我们将创建小费计算器作为StatelessWidget 。 因此，打开main.dart ，删除其所有内容，并向其中添加以下代码：

import 'package:flutter/material.dart';

class TipCalculator extends StatelessWidget {

}

在上面的代码中， import行很重要，因为material.dart是包含我们将在此应用程序中使用的所有Material Design小部件的库。

要存储帐单金额和小费百分比，请在类中添加两个成员变量。

double billAmount = 0.0;
double tipPercentage = 0.0;

要开始创建应用程序的用户界面，请覆盖build()方法。

@override
Widget build(BuildContext context) {
    // More code goes here
}

现在让我们创建两个TextField小部件。 这样做时，我们可以指定详细信息，例如我们要与小部件关联的标签，以及焦点对准时必须显示的虚拟键盘的类型。

因为我们不能直接检索TextField小部件的内容，所以我们还必须将onChanged事件处理程序与其关联。 在接收一个InputValue对象的处理程序内部，我们可以更新类的成员变量的内容。

因此，在build()方法内添加以下代码：

// Create first input field
TextField billAmountField = new TextField(
  labelText: "Bill amount(\$)",
  keyboardType: TextInputType.number,
  onChanged: (InputValue value) {
    try {
      billAmount = double.parse(value.text);
    } catch (exception) {
      billAmount = 0.0;
    }
  }
);

// Create another input field
TextField tipPercentageField = new TextField(
  labelText: "Tip %",
  keyboardType: TextInputType.number,
  hintText: "15",
  onChanged: (InputValue value) {
    try {
      tipPercentage = double.parse(value.text);
    } catch (exception) {
      tipPercentage = 0.0;
    }
  }
);

即使您以前从未使用过Dart，只要您熟悉Java，上面的代码也应该相当直观。 例如，您可以看到我们正在使用parse()方法将每个TextField小部件的文本内容转换为double对象。 由于parse()方法可以引发FormatException ，因此它也被try...catch块包围。

创建RaisedButton小部件非常类似于创建TextField小部件。 但是，要为其分配标签，您必须创建一个新的Text小部件并将其添加为其child 。

// Create button
RaisedButton calculateButton = new RaisedButton(
    child: new Text("Calculate"),
    onPressed: () {
        // More code goes here
    }
);

在按钮的onPressed事件处理程序内，我们将计算小费和要支付的总金额，并在模式对话框中显示两者。 要创建对话框，我们可以使用AlertDialog类。 创建对话框后，可以通过将其作为参数传递给showDialog()方法来显示该对话框。

相应地，在onPressed事件处理程序中添加以下代码：

// Calculate tip and total
double calculatedTip = billAmount * tipPercentage / 100.0;
double total = billAmount + calculatedTip;

// Generate dialog
AlertDialog dialog = new AlertDialog(
content: new Text("Tip: \$$calculatedTip \n"
    "Total: \$$total")
);

// Show dialog
showDialog(context: context, child: dialog);

在上面的代码中，请注意，我们已经使用Dart的字符串插值功能将变量嵌入对话框content中。 此外，您可以看到Dart中的字符串文字可以通过将它们彼此并置而进行连接-尽管您也可以使用+运算符。

6.创建小部件树

Flutter应用程序通常只是一棵小部件树。 换句话说，您可以通过简单地创建多个窗口小部件并在它们之间建立父子关系来创建Flutter应用程序。

当前，我们在上一步中创建的小部件之间没有任何关系。 您可能已经猜到了，它们全都是兄弟姐妹，所以现在让我们为它们创建一个父窗口小部件。

可以具有多个子代的窗口小部件通常称为布局窗口小部件。 Flutter提供了几个布局小部件供您选择。 对于我们的应用程序，“ Column窗口小部件是最合适的，因为它将其所有子级都放置在另一个位置之下。

另外，为了符合Material Design规范，我们必须在Column小部件中添加16 dp的填充。 我们可以通过使其成为Container小部件的child来实现。

Container container = new Container(
  padding: const EdgeInsets.all(16.0),
  child: new Column(
    children: [ billAmountField, 
                tipPercentageField, 
                calculateButton ]
  )
);

没有应用栏，材料设计用户界面将不完整。 因此，现在使用AppBar小部件创建一个。

AppBar appBar = new AppBar(title: new Text("Tip Calculator"));

包含应用栏和容器的布局非常普遍，Flutter提供了一个Scaffold小部件来帮助您快速建立它们之间的关系。

Scaffold scaffold = new Scaffold(appBar: appBar, 
                                 body: container);

有了Scaffold小部件，它的小部件树就可以使用了。 您可以继续使用Scaffold小部件作为build()方法的返回值。

return scaffold;

如果发现很难形象化这棵树，则以下图表应会有所帮助：

7.创建一个入口点

我们的Dart文件需要main()函数作为其入口点。 在其中，我们必须调用runApp()函数来实际膨胀和渲染在上一步中创建的窗口小部件树。

此外，必须将我们的TipCalculator小部件放置在MaterialApp小部件内，以便可以将Material Design主题和颜色方案应用于该小部件。 因此，将以下代码添加到main.dart中 ：

void main() {
  runApp(new MaterialApp(
    title: 'Tip Calculator',
    home: new TipCalculator()
  ));
}

现在，您可以按Hot Reload App按钮以开始在设备上使用该应用程序。

结论

在本教程中，您学习了如何使用Flutter和Dart以及IntelliJ IDEA来为Android创建一个简单的应用程序。

我认为，Flutter具有开发人员在跨平台移动应用程序开发框架中可能需要的几乎所有东西。 但是，在决定开始使用它构建下一个大型应用程序之前，请注意，它仍然是一个非常新且发展Swift的框架。

要了解有关Flutter的更多信息，可以参考其官方文档 。

翻译自: https://code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270