设计和编写您的第一个Flutter应用程序

用Flutter设计一个应用程序是相当简单的，即使你是一个初学者，这个过程也很容易理解。

本指南将帮助您开始使用在Flutter上开发的第一个应用程序。它将教您一些核心的UI和设计元素，这些元素共同构成了一个应用程序，如字体、主题、方向、点心栏和抽屉。

开始使用 Flutter

开始使用Flutter并不要求您有丰富的应用开发经验。这里有几个Flutter教程可以指导您完成创建应用程序的完整过程。

让Flutter编程更加简单的是，所有的应用程序都是用Dart语言编写的。因此，你也不需要知道Swift或Java等操作系统特定的编程语言。

要想开始，你必须下载并安装Flutter SDK。

如果您没有Android Studio，您可以使用任何其他IDE来开发Flutter应用程序。我们之所以使用Android Studio，是因为它有很多功能可以帮助更快地开发Flutter应用程序。

一旦它被安装，您就可以开始您的项目了。

构建第一个Flutter应用程序

在开始使用Flutter并设置了SDK和IDE后，您必须创建一个项目。

打开Android Studio并创建一个新的Flutter项目。

接下来，您必须给您的项目起个名字，选择Flutter SDK的路径，设置项目的位置，然后点击下一步。现在输入项目名称。我们想把它命名为我的设计。

在你输入所有信息并按下一步然后完成后，Android Studio将为你设置一些启动代码并启动该项目。下面是启动代码的样子。

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to My Design',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

现在你可以运行该项目，看看应用程序的样子。

很好！这是建立你的应用程序的第一步。这是构建你的第一个Flutter应用程序的第一步。到目前为止，它是一个简单的应用程序，有一个顶栏和一个中间的按钮。

材料设计包

现在，如果我们回到代码的顶部，我们会看到这一行：

import 'package:flutter/material.dart';

初始应用使用了Material Design。Material Design是一个由谷歌创建的设计系统。有了Flutter，创建一个Material Design应用是很容易的--我们可以利用很多预制的材料组件和小工具。

要在 Flutter 中使用 Material Design，请导入 material.dart包。这些小部件照顾到了从字体到对齐方式到主题的一切。当然，你不一定要使用Material Design--Flutter框架的设计方式是创建对象的层级，框架层级的每一部分都是可选和可替换的。

让我们来定制我们的应用程序。我们将从文本小部件开始。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Text(
        'Hello, Max! How are you?',
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }

}

结果会是这样的:

文本部件将以默认字体显示文本，它将根据布局分成几行。

然而，你可以使用Text.rich 构造函数对文本进行样式设计。它将显示一个具有不同风格的文本的段落。

下面是文本代码供参考。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Text.rich(
        TextSpan(
          text: 'Hello', // default text style
          children: <TextSpan>[
            TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
            TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }

}

(一个额外的提示：如果你想让你的文本对触摸事件做出反应，可以使用一个手势检测器部件并将文本包裹在其中。我将在后续文章中解释这个问题）。

Flutter应用程序的设计元素

以下是您可能想在您的第一个Flutter应用程序中使用的主要设计元素。

主题

Flutter UI的宗旨是让人们创建吸引人的应用程序。对于初学者，如果没有选择其他主题，Flutter会给您的应用程序提供默认主题。

现在，您可以玩弄代码，测试Flutter能做的一切。

这里有一个例子。

而它的代码应该是这样的。

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


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        // Define the default brightness and colors.
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],

        // Define the default font family.
        fontFamily: 'Georgia',

        // Define the default TextTheme. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
      ),
      home: MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).accentColor,
          child: Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
      ),

    );
  }
}

这里是另一个例子，你可以改变背景的颜色，并添加不同的元素来改善你的应用程序。

下面是它的代码是如何进行的。

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


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Custom Themes';

    return MaterialApp(
      title: appName,

      home: MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Theme(
          // Create a unique theme with "ThemeData"
          data: ThemeData(
            accentColor: Colors.yellow,
          ),
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.add),
          ),
        ),
      ),

    );
  }
}

字体

Flutter提供了几种自定义字体，您可以应用于您的应用程序。这些字体可以应用于整个应用程序或特定的小部件。

要使用海关字体，您可以将它们导入Flutter。使用此代码来导入您选择的字体。

awesome_app/
  fonts/
    Font-Regular.ttf
    Font-Italic.ttf
    Font-Regular.ttf
    Font-Bold.ttf

导入字体后，您必须在pubspec中声明字体，在pubspec.yaml文件中包含一个字体定义。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

在这之后，你有两个选择。

1. 将一种字体设置为默认字体
2. 在一个特定的小组件中使用一种字体

在下面的代码中，你可以看到如何做这些选项的例子。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      // Set Raleway as the default app font.
      theme: ThemeData(fontFamily: 'Raleway'),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default Raleway font.
      appBar: AppBar(title: Text('Custom Fonts')),
      body: Center(
        // This Text widget uses the RobotoMono font.
        child: Text(
          'Roboto Mono sample',
          style: TextStyle(fontFamily: 'RobotoMono'),
        ),
      ),
    );
  }
}

下面是你的应用程序的样子。

这将把Roboto Mono字体只应用于文本小部件，而Raleway则保持为应用程序的默认字体。

用户界面和整体布局

Flutter允许您根据用户设备的方向建立不同的布局。例如，你可以在纵向模式下建立一个有两列的网格视图列表，在横向模式下建立三列。

首先，创建一个有两列的网格。

GridView.count(
  // A list with 2 columns
  crossAxisCount: 2,
  // ...
);

现在，使用OrientationBuilder widget来根据设备的方向调整布局。

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

现在，布局将在水平方向有三列，而在垂直方向有两列。这就是完整的代码。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Orientation Demo';

    return MaterialApp(
      title: appTitle,
      home: OrientationList(
        title: appTitle,
      ),
    );
  }
}

class OrientationList extends StatelessWidget {
  final String title;

  OrientationList({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // Create a grid with 2 columns in portrait mode, or 3 columns in
            // landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(100, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

这就是你的应用程序的样子。

添加一个抽屉

你也可以添加抽屉来显示你的应用程序的额外信息。

抽屉是通过使用一个抽屉部件，结合一个脚手架来添加的。抽屉被包裹在脚手架小部件中。

关于如何在脚手架中添加一个抽屉并向抽屉中添加内容的例子，请看下面的代码。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
          body: MyHomePage(title: appTitle)),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

上面的代码将实现这种外观。

结论

Flutter以其小部件和易于使用的界面简化了应用程序的开发过程。在为你的flutter应用程序添加和修改元素时，有无限的可能性。本指南涵盖了一些关键元素，这些元素是每个应用程序设计中不可或缺的一部分。

所以，要多做实验，因为只有测试和实践才能让你成为一个伟大的应用开发者。