Flutter 基础使用教程

[chemistry-]

Flutter 基础使用教程

Flutter 是由 Google 开发的开源移动应用开发框架。它允许您使用单个代码库构建高性

能、高保真度的 Android 和 iOS 应用程序。本文将介绍 Flutter 的基本概念和基础使用方法。

 

安装 Flutter

在开始 Flutter 应用程序之前，您需要安装 Flutter SDK。Flutter 支持 Windows、MacOS

和 Linux 操作系统。以下是在 Window 系统上安装 Flutter 的步骤：

下载 Flutter SDK 并解压缩到合适的目录中。

设置 Flutter 路径：将 Flutter 安装目录下的 bin 目录添加到你的 PATH 环境变量中。

运行 flutter doctor 命令，检查所需的依赖项和环境配置是否已安装和正确配置。

如果一切正常，则可以开始创建 Flutter 应用程序。

创建 Flutter 应用程序

Flutter 应用程序是使用 Dart 语言编写的，并且在 UI 界面上使用 Widgets 构建。以下是

如何创建一个基本的 Flutter 应用程序的步骤：

使用 flutter create 命令创建新的 Flutter 应用程序。flutter create my_app

这个命令将创建一个名为 my_app 的新 Flutter 应用程序，并在其中包含一些默认生成的文件

和代码。

打开 IDE（集成开发环境）或编辑器，并打开新建的 Flutter 应用程序目录。 推荐的编

辑器：Visual Studio Code，Android Studio 等。

将 Flutter 应用程序连接到设备或模拟器。 Flutter 提供了一个简单的工具来运行和测试

Flutter 应用程序。您可以通过以下命令将 Flutter 应用程序连接到设备：

flutter run

编写 UI 界面：在 my_app\lib\main.dart 文件中，您可以编写 Flutter UI 代码。Flutter 应

用程序使用 Widgets 来构建 UI 界面。

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'My App',

home: Scaffold(

appBar: AppBar(title: Text('My App')),

body: Center(child: Text('Hello World')),

),

);

}

}

在这个例子中，我们创建了一个 MaterialApp 小部件，然后在主页上创建了一个 Scaffold 小

部件。Scaffold 小部件包含一个应用栏和一个居中对齐的文本小部件。

运行 Flutter 应用程序并测试 UI 界面。

Flutter 基础组件

Flutter 提供了许多基本的小部件来构建 UI 界面。以下是一些常用的小部件示例：

AppBar：顶部应用程序栏

AppBar(

title: Text('My App'),

actions: <Widget>[

IconButton(icon: Icon(Icons.search), onPressed: () {}),

IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),

],

),

Button：包含文本和/或图标的可点击按钮

RaisedButton(

onPressed: () {},

child: Text('Click Me'),

),

TextField：文本输入框

dartCopy Code

TextField(

decoration: InputDecoration(

hintText: 'Enter your name',

),

),

Image：显示图像的小部件

Image.network('https://example.com/image.jpg'),

ListView：滚动列表视图

dartCopy Code

ListView(

children: <Widget>[

ListTile(title: Text('Item 1')),

ListTile(title: Text('Item 2')),

ListTile(title: Text('Item 3')),

],

),

  

Flutter 布局

Flutter 提供了多种布局选项，如 Column、Row、Stack、Expanded 等来管理小部件。以下是

一些示例：

Column：垂直排列小部件

Column(

children: <Widget>[

Text('Row 1'),

Text('Row 2'),

Text('Row 3'),

],

),

Row：水平排列小部件

Row(

children: <Widget>[

Text('Column 1'),

Text('Column 2'),

Text('Column 3'),

],

),

Stack：将小部件堆叠在一起

Stack(

children: <Widget>[

Image.network('https://example.com/background.jpg'),

Positioned(

bottom: 20,

left: 20,

child: Text('Hello World'),

),

],

),Expanded：扩展小部件以填充剩余空间

Column(

children: <Widget>[

Expanded(child: Text('Row 1')),

Expanded(child: Text('Row 2')),

Expanded(child: Text('Row 3')),

],

),

总结

本教程中，介绍了 Flutter 的基本概念和基础使用方法。Flutter 可以使用单个代码库构

建高性能、高保真度的 Android 和 iOS 应用程序。Flutter 使用 Dart 语言编写，并使用 Widgets

来构建 UI 界面。同时，Flutter 提供了多种布局选项来管理小部件。希望这篇文章能够帮助

大家更好地了解 Flutter 并轻松创建 Flutter 应用程序。