为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Flutter升级入门：从新手到熟悉的基本步骤

Flutter升级入门：从新手到熟悉的基本步骤

标签：
杂七杂八
概述

Flutter升级入门介绍了Flutter的基础概念、优势和应用场景，涵盖了环境搭建、第一个Flutter应用的创建以及常用Widget的使用。文章还详细讲解了基本UI设计与布局、路由与导航等内容，帮助开发者快速掌握Flutter开发技巧。

Flutter基础简介

什么是Flutter

Flutter是由Google开发的开源UI框架，它允许开发者使用单个代码库为多个平台开发移动和桌面应用程序。Flutter使用Dart编程语言编写，旨在提供快速的开发体验和高性能的原生应用，同时保持高度的可定制性。Flutter框架包括丰富的UI组件、动画、手势识别等功能，使开发者能够快速创建高质量的应用程序。

Flutter的优势

  1. 快速开发：Flutter使用热重载（Hot Reload）功能，允许开发者在不重启应用程序的情况下查看代码更改的效果。这大大加快了开发速度和测试周期。
  2. 高性能：Flutter使用自己的渲染引擎，直接绘制到设备的屏幕上，从而避免了中间层的抽象，确保了应用的性能接近原生应用。
  3. 跨平台：使用单个代码库可以在多个平台上（如Android、iOS、Web、Windows、macOS和Linux）构建应用，减少了开发和维护多个版本的复杂性。
  4. 美观的UI：Flutter提供丰富的、高度定制化的UI组件，使得开发者能够轻松创建美观且一致的用户界面。
  5. 插件生态系统：Flutter拥有活跃的社区支持和丰富的插件生态系统，可以轻松访问各种平台的特性和服务。
  6. Dart语言：Dart是一种强大的面向对象语言，适合构建高效、可维护的应用程序。
  7. 可定制性：Flutter允许开发者从头开始自定义每一个组件，支持高度定制化的UI设计。

Flutter的应用场景

  1. 移动应用开发：Flutter广泛应用于iOS和Android应用开发，尤其是在需要快速原型设计或迭代的项目中。
  2. 跨平台开发：Flutter特别适合需要同时支持多个平台的应用，如需要在Android、iOS、Web等多个平台上发布的应用。
  3. 企业应用：企业应用通常需要在多个设备上运行，Flutter的跨平台能力使得开发和维护成本大大降低。
  4. 游戏开发：Flutter也适用于简单的游戏开发，特别是那些需要快速迭代和原型设计的游戏。
  5. Web应用开发：随着Flutter支持Web开发，越来越多的开发者开始使用Flutter来开发跨平台的Web应用。

环境搭建与配置

安装Flutter SDK

  1. 下载Flutter SDK：访问Flutter官网，点击“Get Started”下载适用于您的操作系统的Flutter SDK包。
  2. 解压文件：将下载的压缩文件解压到您的计算机上的某个目录，例如C:\flutter（Windows），/usr/local/flutter（Linux），或/Users/yourusername/flutter（macOS）。
  3. 添加环境变量：将Flutter SDK的路径添加到系统的环境变量中。对于Windows，可以在“系统属性”中修改“环境变量”，添加%FLUTTER_ROOT%\bin到Path中；对于Linux和macOS，可以在.bashrc或.zshrc文件中添加路径。 
    export PATH="$PATH:/path/to/flutter/bin"
  4. 安装依赖项：确保安装了Flutter需要的依赖项，如Java Development Kit（JDK）、Android SDK、Android Studio等。对于Windows，还需要安装Visual Studio的Build Tools。

设置开发环境

  1. 安装Android SDK和Android Studio：
    • 访问Android开发者网站，下载并安装Android Studio。
    • 打开Android Studio，进入SDK Manager，安装必要的Android SDK平台和工具。 
      flutter doctor --android-licenses
  2. 安装Visual Studio Code（可选）：
    • 访问Visual Studio Code官网，下载并安装。
    • 安装Flutter和Dart插件，这些插件提供了语法高亮、代码补全等功能。
  3. 配置VS Code：
    • 在VS Code中打开命令面板（Ctrl+Shift+P），输入Flutter: Set Flutter SDK path，选择你的Flutter SDK路径。
    • 安装Flutter插件：点击Extension（扩展）按钮，搜索“Flutter”和“Dart”，安装这两个插件。

验证Flutter安装

  1. 验证Flutter版本：
    • 在命令行中输入flutter --version，确认Flutter已经正确安装并且可以访问。 
      flutter --version

      输出将显示版本号和安装路径，例如：

      Flutter 1.22.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9891a6ff62 • 2021-01-22 17:24:34 • hotfix/1.22.6
Engine • revision 2ccca85867
Dart • version 2.10.5
  2. 验证Dart版本：
    • 输入dart --version，确认安装的Dart版本。 
      dart --version

      输出类似于：

      Dart VM version: 2.12.0 (stable) (Tue Apr 20 13:57:13 2021 +0200) on "linux_x64"
  3. 验证Flutter Doctor：
    • 运行flutter doctor命令，确保所有必要组件都已正确安装。 
      flutter doctor

      输出示例：

      Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.6, Windows 10.0.19041)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.55.2)
[√] Flutter plugin (version 0.22.1)
[√] Dart plugin (version 203.7759)

第一个Flutter应用

创建Flutter项目

  1. 创建新的Flutter项目：
    • 在命令行中进入项目目录，运行flutter create hello_world，创建一个名为hello_world的新项目。 
      flutter create hello_world

      这将创建一个包含所有必要文件的新目录。

  2. 打开项目：
    • 使用VS Code打开项目的hello_world目录。
    • 打开lib/main.dart文件，这是应用程序的主入口点。

项目结构解析

  • hello_world文件夹：这是整个项目的根目录。
  • android文件夹：包含Android平台的项目文件。
  • ios文件夹：包含iOS平台的项目文件。
  • lib文件夹：包含应用程序的主要源代码。
  • lib/main.dart文件：程序的主入口点。
  • pubspec.yaml文件：包含项目依赖项和资源文件的配置。
  • .idea、.git、test等其他文件夹：包含IDE配置、版本控制信息和其他测试文件。

运行第一个应用

  1. 运行应用：
    • 在命令行中进入项目目录，运行flutter run。 
      cd hello_world
flutter run

      输出示例：

      Launching lib/main.dart on Android SDK built for x86 in debug mode...
Running Gradle task 'assembleDebug'...
Built build\app\outputs\flutter-build\debug\app.apk.
Initializing gradle...
Resolving dependencies...
Running Gradle task 'assembleDebug'...
Built build\app\outputs\flutter-build\debug\app.apk.
Syncing files to device Android SDK built for x86...

      应用程序将在模拟器或连接的设备上启动。

  2. 热重载：
    • 编辑main.dart文件并保存，然后在命令行中输入flutter run --hot，应用程序将在不关闭的情况下重新启动并显示更改。 
      flutter run --hot

常用Widget介绍

Text 和 Image Widget

  • Text Widget：用于显示文本内容。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, Flutter!'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(
              fontSize: 20.0,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

    上述代码将在屏幕中央显示蓝色的“Hello, World!”文本。

  • Image Widget：用于显示图片。

    Image.asset('assets/images/my_image.png'),

    该代码将显示项目资源文件夹下的my_image.png图片。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Widget Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/my_image.png'),
        ),
      ),
    );
  }
}

    在Image Widget中，可以使用Image.network(url)来显示网络图片。

    Image.network('https://example.com/my_image.png'),

Button和Input Field

  • Button Widget：用于创建按钮。

    ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  child: Text('Click Me'),
),

    上述代码创建了一个带有点击事件的按钮，点击时执行指定的回调函数。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button clicked!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

  • Input Field Widget：用于创建输入框。

    TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    hintText: 'Your name',
  ),
),

    该代码创建了一个带有标签和提示文本的文本输入框。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(
              labelText: 'Enter your name',
              hintText: 'Your name',
            ),
          ),
        ),
      ),
    );
  }
}

Layout Widgets（Row，Column，Stack等）

  • Row Widget：用于水平排列子Widget。

    Row(
  children: [
    Text('First'),
    Text('Second'),
  ],
),

    该代码水平排列两个文本组件。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row Example'),
        ),
        body: Center(
          child: Row(
            children: [
              Text('First'),
              Text('Second'),
            ],
          ),
        ),
      ),
    );
  }
}

  • Column Widget：用于垂直排列子Widget。

    Column(
  children: [
    Text('First'),
    Text('Second'),
  ],
),

    该代码垂直排列两个文本组件。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column Example'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('First'),
              Text('Second'),
            ],
          ),
        ),
      ),
    );
  }
}

  • Stack Widget：用于堆叠多个Widget。

    Stack(
  children: [
    Text('Bottom'),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Top Left'),
    ),
    Positioned(
      top: 50,
      right: 20,
      child: Text('Top Right'),
    ),
  ],
),

    该代码将一个基础文本与两个位置固定的文本堆叠在一起。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Example'),
        ),
        body: Center(
          child: Stack(
            children: [
              Text('Bottom'),
              Positioned(
                top: 20,
                left: 20,
                child: Text('Top Left'),
              ),
              Positioned(
                top: 50,
                right: 20,
                child: Text('Top Right'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

基本UI设计与布局

布局基础

  • 基础布局组件：Flutter提供了多种布局组件，如Row、Column、Stack等，用于构建复杂的布局结构。

  • Flex布局：使用Flex容器可以实现灵活的布局，通过flex属性控制子元素的相对大小。

    Expanded(
  flex: 2,
  child: Text('Double Width'),
),
Expanded(
  flex: 1,
  child: Text('Single Width'),
),

    在Row或Column中使用Expanded，可以让子元素根据flex属性的比例分配空间。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flex Layout Example'),
        ),
        body: Center(
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Text('Double Width'),
              ),
              Expanded(
                flex: 1,
                child: Text('Single Width'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • Wrap布局：使用Wrap容器可以将子元素自动换行排列。

    Wrap(
  spacing: 8.0,
  runSpacing: 4.0,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
),

    Wrap支持自定义spacing和runSpacing来调整子元素之间的间距。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wrap Layout Example'),
        ),
        body: Center(
          child: Wrap(
            spacing: 8.0,
            runSpacing: 4.0,
            children: [
              Text('Item 1'),
              Text('Item 2'),
              Text('Item 3'),
            ],
          ),
        ),
      ),
    );
  }
}

  • Align和Center布局：使用Align和Center可以将子元素居中或对齐到父容器的某个位置。

    Align(
  alignment: Alignment.center,
  child: Text('Centered Text'),
),
Center(
  child: Text('Centered Text'),
),
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Align Center Example'),
        ),
        body: Center(
          child: Column(
            children: [
              Align(
                alignment: Alignment.center,
                child: Text('Centered Text'),
              ),
              Center(
                child: Text('Centered Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

常用布局技巧

  • 使用BoxConstraints控制大小：可以通过设置BoxConstraints来控制子元素的最小和最大尺寸。

    ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100.0,
    maxWidth: 200.0,
    minHeight: 50.0,
    maxHeight: 100.0,
  ),
  child: Text('Constrained Text'),
),
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BoxConstraints Example'),
        ),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: 100.0,
              maxWidth: 200.0,
              minHeight: 50.0,
              maxHeight: 100.0,
            ),
            child: Text('Constrained Text'),
          ),
        ),
      ),
    );
  }
}

  • 使用Padding和Margin：可以在Widget周围添加内边距和外边距，以调整布局。

    Padding(
  padding: EdgeInsets.all(10.0),
  child: Text('Padded Text'),
),
Container(
  margin: EdgeInsets.all(10.0),
  child: Text('Margin Text'),
),
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Padding Margin Example'),
        ),
        body: Center(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.all(10.0),
                child: Text('Padded Text'),
              ),
              Container(
                margin: EdgeInsets.all(10.0),
                child: Text('Margin Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • 使用Expanded和Flexible：这些Widget可以确保子元素在Flex容器中正确分配空间。

    Row(
  children: [
    Expanded(
      flex: 1,
      child: Text('Flex 1'),
    ),
    Expanded(
      flex: 2,
      child: Text('Flex 2'),
    ),
  ],
),
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expanded Flexible Example'),
        ),
        body: Center(
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: Text('Flex 1'),
              ),
              Expanded(
                flex: 2,
                child: Text('Flex 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

  • 使用AspectRatio布局：确保子元素保持特定的宽高比。

    AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    color: Colors.red,
  ),
),
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AspectRatio Example'),
        ),
        body: Center(
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: Container(
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

响应式设计简介

  • MediaQuery：使用MediaQuery可以获取屏幕尺寸、设备方向等信息。

    double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

    通过MediaQuery，可以动态调整布局，适应不同屏幕尺寸。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery Example'),
        ),
        body: Center(
          child: Text('Screen Width: ${MediaQuery.of(context).size.width}'),
        ),
      ),
    );
  }
}

  • Responsive Layout Builder：使用LayoutBuilder可以构建自适应布局。

    LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(
        children: [
          Text('Column Layout'),
        ],
      );
    } else {
      return Row(
        children: [
          Text('Row Layout'),
        ],
      );
    }
  },
),

    LayoutBuilder可以根据屏幕宽度动态选择布局方式。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive Layout Example'),
        ),
        body: Center(
          child: LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth < 600) {
                return Column(
                  children: [
                    Text('Column Layout'),
                  ],
                );
              } else {
                return Row(
                  children: [
                    Text('Row Layout'),
                  ],
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

路由与导航

创建多页面应用

  • 创建新的页面：可以使用flutter create命令创建新的页面，或者直接在lib目录下创建一个新的Dart文件。

    flutter create page_example

    创建一个新的页面，例如PageExample.dart。

    import 'package:flutter/material.dart';

class PageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Example'),
      ),
      body: Center(
        child: Text('This is Page Example'),
      ),
    );
  }
}

  • 导航到新页面：使用Navigator来导航到新页面。

    Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => PageExample()),
);

    该代码将在当前页面上导航到PageExample页面。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Main Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => PageExample()),
              );
            },
            child: Text('Go to Page Example'),
          ),
        ),
      ),
    );
  }
}

页面间导航

  • 使用Navigator.push：用于导航到新页面。 
    Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => PageExample()),
);

    该代码将导航到PageExample页面。

  • 使用Navigator.pushReplacement：用于导航到新页面，并从导航栈中移除当前页面。 
    Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => PageExample()),
);

  • 使用Navigator.pop：用于返回到上一个页面。

    Navigator.pop(context);

    该代码将返回到上一个页面。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Main Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => PageExample()),
              );
            },
            child: Text('Go to Page Example'),
          ),
        ),
      ),
    );
  }
}

传递数据给新页面

  • 使用全局变量：在一个页面中设置全局变量，在另一个页面中访问该变量。 
    class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Page'),
      ),
      body: Center(
        child: Text('Global Variable: $globalData'),
      ),
    );
  }
}

    该代码通过全局变量globalData传递数据。

  • 使用InheritedWidget：通过InheritedWidget传递数据，确保子树中的所有Widget都能访问数据。

    class MyInheritedWidget extends InheritedWidget {
  final String data;
  MyInheritedWidget({required this.data, required Widget child}) : super(child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context).data;
    return Scaffold(
      appBar: AppBar(
        title: Text('My Page'),
      ),
      body: Center(
        child: Text('InheritedWidget Data: $data'),
      ),
    );
  }
}

  • 使用Navigator传递参数：在导航到新页面时传递参数。

    Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PageExample(data: 'Hello from Main Page'),
  ),
);

    接收参数的页面：

    class PageExample extends StatelessWidget {
  final String data;
  PageExample({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Example'),
      ),
      body: Center(
        child: Text('Received Data: $data'),
      ),
    );
  }
}

    该代码通过参数传递数据，并在新页面中显示数据。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Main Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PageExample(data: 'Hello from Main Page'),
                ),
              );
            },
            child: Text('Go to Page Example'),
          ),
        ),
      ),
    );
  }
}

class PageExample extends StatelessWidget {
  final String data;
  PageExample({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Example'),
      ),
      body: Center(
        child: Text('Received Data: $data'),
      ),
    );
  }
}
点击查看更多内容
发表于 2024.11.21 20:00， 共 10 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

陪伴而非守候

手记
篇
粉丝
62
获赞与收藏
285

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消