Flutter移动应用开发 - 02 第一个程序HelloWorld，包、依赖、widget介绍，词汇本实例实现

最新推荐文章于 2025-03-28 13:11:28 发布
原创 最新推荐文章于 2025-03-28 13:11:28 发布
· 1.4k 阅读 · 19 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #android

本文介绍了Flutter的基础知识，从HelloWorld程序开始，讲解了如何引入包和依赖，展示了使用english_words包随机生成单词的实例。接着深入讨论了Widget的概念和特性，包括无状态和有状态的Widget，并给出了使用Widget构建随机单词列表的例子。最后，通过创建一个基础版和进阶版的背单词APP，演示了路由切换和界面导航的基本操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1. 基础Holle World

首先我们先拿一段官网上的最基础的Hello World代码，之后基于这段代码进行优化，并借此了解相关操作

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

效果如下图所示

在这里插入图片描述

2. 包

学过python和java的读者应该知道，编程中有引入包的操作，在flutter中当然也有，但是有一说一相对python直接 pip install 然后 import 来说肯定是要麻烦点的。

这部分我们跟官网一样，用 english_words（很多开源的包都可以在 pub.dev 中找到）这个开源包示范。这个包里面有含数千个最常用的英文单词以及一些实用功能。

2.1. 依赖

我们说flutter比python引入外部包比python包麻烦一点，跟这个也有关。我们需要先去 pubspec.yaml（管理 Flutter 工程中的所有资源和依赖的文件）中搭建和查看依赖关系。

在这里插入图片描述

点Pub get => 相当于运行了 flutter pub get

在这里插入图片描述

在这里插入图片描述

2.2. 随机生成单词实例

运用刚刚导入的包，我们将Hello World中的文本替换为包自己随机生成的英文文本。主要关注导包的过程。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        // body: const Center(
        //   child: Text('Hello World'),
        // ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

效果如下：

3. widget

3.1. 特性介绍

widget在flutter中是一个非常重要的概念。widget最重要的工作之一就是提供build()方法，这可以用更低级的widget的特性来渲染自己的特性。

以HelloWorld代码为例，Myapp类本身就是继承了StatelessWidget类，所以Myapp类也是一个widget，因此，它可以用下面的widget渲染自己，这之中就包括几个比较常用的widget：对齐 (alignment)、填充 (padding) 和布局 (layout)等等。

Scaffold 是 Material 库中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。 widget 树可以很复杂。但是HelloWorld里的其实还好，下面的树包括Center widget，这下面有有一个Text widget。因为Center的存在，这段文字就出现在屏幕中间了。

此外，widgets还分有状态和无状态两种形式，无状态的widgets内所有的属性都是final性质的，这意味着它的属性不可改变；相对的，有状态的widgets的属性就可以在其生命周期内改变。那怎么区分有状态和无状态？有状态一般有两个类：

  1. StatefulWidget 类，这个类本身不变
  2. State 类，这个类本身存在于整个生命周期中

这里对widget的介绍主要是一些浮于表面的东西，更详细的见博主的另一篇博客。

3.2. 实例

我们复现下包中的实例，不过这里是使用 widget 完成的。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        // body: const Center(
        //   child: Text('Hello World'),
        // ),
        // body: Center(
        //   child: Text(wordPair.asPascalCase),
        body: const Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}


// 输入stful会自动跳提示的，然后就可以在样板上操作了
class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  // 状态类继承自 State<RandomWords>
  @override
  State<RandomWords> createState() => _RandomWordsState();
}

// _是为了增强隐私性，是针对 State 对象推荐的最佳实践写法
// 重写下build的代码，修改为胜场随机字符的Text
class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    // return Container();
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

效果同上。

4. 背单词APP实例

4.1. 基础版

先做一个能够无限翻页的实例。

在这里插入图片描述

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        // body: const Center(
        //   child: Text('Hello World'),
        // ),
        // body: Center(
        //   child: Text(wordPair.asPascalCase),
        body: const Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}


// 输入stful会自动跳提示的，然后就可以在样板上操作了
//
class RandomWords extends StatefulWidget {
  // const RandomWords({Key? key}) : super(key: key);
  const RandomWords({super.key});
  // 状态类继承自 State<RandomWords>
  @override
  // State<RandomWords> createState() => _RandomWordsState();
  State<RandomWords> createState() => _RandomWordsState();
}

// _是为了增强隐私性，是针对 State 对象推荐的最佳实践写法
// 重写下build的代码，修改为胜场随机字符的Text
class _RandomWordsState extends State<RandomWords> {
  //
  final _suggestions = <WordPair>[];
  // 设置字体
  final _biggerFont = const TextStyle(fontSize: 16);
  @override
  Widget build(BuildContext context) {
    // return Container();
    // final wordPair = WordPair.random();
    // return Text(wordPair.asPascalCase);
    return ListView.builder(
      padding: const EdgeInsets.all(26.0),
      // 对每一个单词都用itemBuilder
      itemBuilder: (context, i) {
        // 在每行前加分割线，即i为奇数的时候
        if (i.isOdd) return const Divider();
        // /2向下取整，表实际单词数
        final index = i ~/ 2;
        // 单词数不够的时候，加10个单词
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        // 不是奇数的时候放单词
        return ListTile(
          title: Text(
            // 每次return当前单词
            _suggestions[index].asPascalCase,
            // 设置style
            style: _biggerFont,
          ),
        );
      },
    );
  }
}

4.2. 进阶版

在flutter中，界面切换称作路由切换，进阶版中我们将添加一个主路由切换新路由的操作。flutter的导航器是一个栈，新界面会被push到栈中，当推出这个界面时，会被pop出来。

在这里插入图片描述

代码实现如下，注释写的很详细了。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      // 这个歌东西特别有用，是用来决定整个项目的主题的。
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.blue,
      ),
      home: const Scaffold(
        // 效果和上面的title重复了
        // appBar: AppBar(
        //   title: const Text('Welcome to Flutter'),
        // ),
        body: Center(
          child: RandomWords(),
        ),
      ),
    );
  }
}


// 输入stful会自动跳提示的，然后就可以在样板上操作了
//
class RandomWords extends StatefulWidget {
  // const RandomWords({Key? key}) : super(key: key);
  const RandomWords({super.key});
  // 状态类继承自 State<RandomWords>
  @override
  // State<RandomWords> createState() => _RandomWordsState();
  State<RandomWords> createState() => _RandomWordsState();
}

// _是为了增强隐私性，是针对 State 对象推荐的最佳实践写法
// 重写下build的代码，修改为胜场随机字符的Text
class _RandomWordsState extends State<RandomWords> {
  // 存储单词
  final List<WordPair> _suggestions = <WordPair>[];
  // 设置单词是否被标注为收藏，这里必须声明_liked是一个<WordPair>
  final Set<WordPair> _liked = Set<WordPair>();
  // 设置字体
  final _biggerFont = const TextStyle(fontSize: 18);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Clark\'s Homework'),
        // 这里出现新的界面，我们加入图标
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildWords(),
    );
  }


  // 这里显示
  Widget _buildWords() {
    // return Container();
    // final wordPair = WordPair.random();
    // return Text(wordPair.asPascalCase);
    return ListView.builder(
      padding: const EdgeInsets.all(26.0),
      // 对每一个单词都用itemBuilder
      itemBuilder: (context, i) {
    // 在每行前加分割线，即i为奇数的时候
    if (i.isOdd) return const Divider();
    // /2向下取整，表实际单词数
    final index = i ~/ 2;
    // 单词数不够的时候，加10个单词
    if (index >= _suggestions.length) {
    _suggestions.addAll(generateWordPairs().take(10));
    }
    // 不是奇数的时候放单词和收藏
    return _buildRow(_suggestions[index]);
    });
  }

  // 为了给文字后面加爱心
  Widget _buildRow(WordPair pair) {
    // 表示这个单词是否被like了
    final bool alreadySaved = _liked.contains(pair);
    return ListTile(
      // 放文字
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      // 放图标
      trailing: Icon(
        alreadySaved ? Icons.grade : Icons.verified,
        color: alreadySaved ? Colors.yellow : null,
      ),
      // 交互：点击前后图标的变换
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _liked.remove(pair);
          } else {
            _liked.add(pair);
          }
        });
      },
    );
  }

  // 这里定义被点击后新的界面出现的流程
  void _pushSaved() {
    // 入栈
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = _liked.map(
            // (WordPair pair)这部分这样写报错(pair)不报错是因为前面没有定义liked是<WordPair>
            (WordPair pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );

          // 负责组成一个容器，将context和tiles以list的形式合到一起，这俩都在builder里生成了
          final List<Widget> divided = ListTile
              .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();


          // 弹回一个新的界面的Scaffold，这个界面标题是Saved Suggestions，内容是一个devided
          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }

}
Flutter学习之Hello World
m0_60264901的博客
06-08 1182
Flutter之入门学习第一天
Flutter系列（四）——HelloWorld
03-05 622
想学Flutter，就请关注这个专栏 Flutter系列（一）——详细介绍 Flutter系列（二）——与React Native进行对比 Flutter系列（三）——环境搭建（Windows） Flutter系列（四）——HelloWorld 文档归档： https://github.com/yang0range/flutterfile 创建的第一个Demo 上一篇文章，详细的介绍了Flu...
Flutter - Hello world
mrRuby的博客
12-31 591
一、概要 Flutter发展已经逐步稳定，使用的人群和企业也越来越多，已经逐步得到了大家的认可。最近公司有一个项目，用户相对固定，因此打算使用Flutter来做一次实验，到底能不能做出我们能够接受的效果。 二、环境搭建 2.1 环境变量配置 说明：以下全部操作均在Windows上。 官网搭建说明：https://flutter.cn/docs/get-started/install 初次使用建议参考一下。 这里注意一点：为了正常升级和通过pub package 命令获取packages，需要设置两个环境变量
跨平台开发: 使用Flutter构建高性能的移动应用
最新发布
2501_91395209的博客
03-28 871
Flutter是Google开发的一种用于构建高性能移动应用的UI框架。它使用Dart语言编写，并可以跨平台运行，包括iOS、Android、Web和桌面应用。Flutter的核心是一个渲染引擎，它使用C++编写，并可以与各种平台的原生UI框架进行集成。在开发完成后，开发者可以使用appuploader这样的iOS开发助手工具来简化应用的上架流程。appuploader提供了证书管理、描述文件生成、应用打包和上传等一站式服务，大大提高了Flutter应用上架App Store的效率。
Flutter开发之Hello World
iOSbird的博客
04-28 483
一、创建项目 flutter项目的创建有两种方式：通过命令行创建和开发工具创建。 1、命令行创建： flutter create xxx 注意：Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识 2、开发工具创建，比如使用Android Studio创建，选择 Start a new Flutter project ...
flutter hello world
牛腩的专栏
09-20 194
在surface pro4上不知道怎么弄好了Flutter了，运行成功在redmi k30 pro手机上了， 结果跑到神舟精盾本本上再弄一次又出问题了，每次搭建flutter环境总是出问题，郁闷， 写个博客记录下来碰到的问题，便于以后查询！！！ 下载好flutter_windows_1.20.4-stable（本地下载很慢，我都是远程桌面到其他服务器上，在其他服务器上下载了再直接从远程桌面拉下来，已传到和彩云网盘上），解压到c:\flutter\目录下 ,环境变量path里加上C:\flutter\bin，
Flutter入门指南：快速搭建第一个Hello World应用
## 1.3 Flutter在移动应用开发中的应用 ## 第二章：准备工作 在这一章中，我们将会详细介绍如何准备Flutter开发环境以及创建一个新的Flutter项目。让我们开始吧！ ### 第三章：Flutter基础 在这一章中，我们将学习...
Flutter---Widget介绍
nano-11的专栏
11-01 1589
Flutter里又一个非常重要的核心理念: 一切皆为组件, Flutter所有的元素皆由组件组成。比如: 一个布局元素，一个动画，一个装饰效果等。 Widget使用地址：https://github.com/nanos-11/Flutter_nan 一、根组件Widget 简介：Widget是所有组件的基类 所有组件都继承自它 要想自定义组件必须继承下边两个类中的其中一个： 1️⃣ StatelessWidget：无状态组件，状态不可变。 2️⃣ StatefulWidget：有状态组件，持有的状态可能在w
Flutter开发笔记04 - Flutter_Widget布局控件笔记
酸柠檬的博客
04-12 295
GitHub Demo 地址：https://github.com/LINGLemon/lxf_flutter_demo 1、Stack Stack即层叠布局控件，能够将子控件层叠排列。Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。 import 'packa.
flutter学习资料实例，构建复杂widget树和对动态路由的学习
09-14
Flutter是Google推出的一款开源UI工具包，用于构建高性能、高保真、跨平台的应用程序，支持Android、iOS以及Web和桌面平台。这个压缩包文件包含了关于Flutter学习的一些实例，特别是针对构建复杂Widget树和理解动态...
Flutter 第一个程序Hello World!
晨曦
07-20 3695
Flutter实际上在我学习Android之前就已经听说过了，不过那时候的Flutter还是初始版本，并不如原生，虽说有跨平台的优势，但也只是了解而已，没有去正式使用，那么为什么又要学习了呢？
Flutter入门（一，Hello world）
什么风把您给吹来了
04-07 1346
清明节假期的最后一天，我把前两天学的东西稍微做了一下总结。 其实第一天没学习，忙着打LOL，连续输了一天，我那个心累鸭， 然后还容易生气，气不过那些沙雕网友都能让我遇到，转悲伤为力量跑去学习了 声明。 我只是想把flutter做一个入门，好去学我的Unity中的UIWidgets，因为他那个优化真不错。要跟上时代的潮流，并不是盲目跟风。所以应该不会做过深的了解flutter。 ...
【flutter】HelloWorld篇
LCQ_CG的博客
09-14 302
flutter官网文档中的程序
Flutter入门之——HelloWorld
热门推荐
卜大爷的博客
09-14 2万+
本文我们将实现Flutter的第一个APP——HelloWorld。
创建你的第一个Flutter应用程序
weixin_34405925的博客
02-28 178
前言 Flutter,Google推出的跨平台开发框架。就在前几天，Flutter的首个发布预览版（Release Preview 1）正式发布！ 即将迎来Flutter 正式版（1.0）。本篇将带你创建第一个Flutter应用（Windows环境）。 安装 1.下载Flutter SDK Flutter SDK 点击下载 1-1.点击上面地址下载Flutter SDK，将下载的zip文...
初识Flutter之Hello World
T3119205的专栏
07-03 540
上一篇文章已经配置好了开发环境，现在迫不及待的开始“试驾”我的，flutter小程序，哈哈 1.构建和运行flutter的方法很多，比如Android Studio， VS Code， Terminal+编辑器，选择Terminal+编辑器写程序的人可以称得上是大牛了，由于我是菜鸟，这里我选择Android Studio的方式构建呦，VS Code大同小异。 （1）选择File>Ne...
Hello World
02-19 174
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new M...
使用flutter在移动端开发
zzz777qqq的博客
04-19 665
长期以来，移动端的开发都需要为相同的产品逻辑实现两套代码。在大多数情况下，这两套代码所描述的逻辑基本是一致的，只是用不同的编程语言在阐述，为的是部署到不同的平台上。这种模式会产生以下问题：首先，显而易见的是造成人力资源的浪费。大量可复用的逻辑没有复用，本来可以释放出来做深度探索的人力，浪费在重复的UI和基本逻辑的开发中。UI上的不一致。在当前工作流中，设计图往往只有一套，并不区分iOS和Android。而在某些时候，因为要兼顾到平台特性和不同平台的实现成本，这相同的UI设计在两端展现就有可能不完全一致。
移动开发：使用 Flutter 构建跨平台应用
weixin_40854270的博客
07-11 154
Flutter 是由 Google 开发的开源 UI 软件开发工具包，用于创建高性能、跨平台的移动应用。本文将介绍 Flutter 和 Dart 的基本概念，指导如何搭建开发环境并创建第一个 Flutter 应用，以及实现多平台适配和响应式设计的技巧。Flutter 和 Dart 的基本介绍什么是 Flutter？Flut...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铖铖的花嫁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值