首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将文本提交到按钮,当按下按钮时,它将使用bloc in flutter在另一个页面上显示文本

在Flutter中,可以使用BLoC(Business Logic Component)模式来管理应用程序的状态和业务逻辑。要实现将文本提交到按钮并在另一个页面上显示文本的功能,可以按照以下步骤进行操作:

  1. 创建一个新的Flutter项目,并在pubspec.yaml文件中添加bloc和flutter_bloc依赖。
代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  bloc: ^7.0.0
  flutter_bloc: ^7.0.0
  1. 在lib目录下创建一个新的文件夹,命名为bloc,并在其中创建一个新的文件,命名为text_bloc.dart。在该文件中定义一个用于管理文本状态的BLoC类。
代码语言:txt
复制
import 'package:bloc/bloc.dart';

class TextBloc extends Bloc<String, String> {
  TextBloc() : super('');

  @override
  Stream<String> mapEventToState(String event) async* {
    yield event;
  }
}
  1. 在lib目录下创建一个新的文件夹,命名为pages,并在其中创建两个新的文件,分别命名为home_page.dart和result_page.dart。home_page.dart是应用程序的主页,result_page.dart是用于显示文本的页面。

home_page.dart:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:your_project_name/bloc/text_bloc.dart';

class HomePage extends StatelessWidget {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _textEditingController,
              decoration: InputDecoration(
                hintText: 'Enter text',
              ),
            ),
            ElevatedButton(
              onPressed: () {
                final text = _textEditingController.text;
                BlocProvider.of<TextBloc>(context).add(text);
                Navigator.pushNamed(context, '/result');
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

result_page.dart:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:your_project_name/bloc/text_bloc.dart';

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result'),
      ),
      body: Center(
        child: BlocBuilder<TextBloc, String>(
          builder: (context, state) {
            return Text(state);
          },
        ),
      ),
    );
  }
}
  1. 在lib目录下创建一个新的文件,命名为main.dart,并在其中配置应用程序的路由。
代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:your_project_name/bloc/text_bloc.dart';
import 'package:your_project_name/pages/home_page.dart';
import 'package:your_project_name/pages/result_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BLoC Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => BlocProvider<TextBloc>(
              create: (context) => TextBloc(),
              child: HomePage(),
            ),
        '/result': (context) => ResultPage(),
      },
    );
  }
}
  1. 运行应用程序,你将看到一个文本输入框和一个提交按钮。当你在文本输入框中输入文本并按下按钮时,应用程序将导航到另一个页面,并在该页面上显示你输入的文本。

这是一个简单的示例,演示了如何使用BLoC在Flutter中实现将文本提交到按钮并在另一个页面上显示文本的功能。在实际开发中,你可以根据需要进行扩展和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter BLoC 教程:使用 BLoC 模式的状态管理

模式的优缺点 我们进入 flutter bloc 教程之前,我们说说 bloc 设计模式的优缺点。...✅ 简单应用不推荐使用 ✅ 有更多标准化代码,但可以通过扩展解决 Flutter BLoC 教程目标 我们将构建相关简单的应用,来演示 BLoC 如何使用流来管理状态,并为 bloc 编写一些测试。...我们将构建一个更改文本的应用程序;按压文本将会更改,并显示出来。参考下面的 GIF 图。...✅ ChangeTextEvent 通过按钮点击添加,BLoC 则运行,并接收到该事件。...:我们使用它来提供我们 bloc 一个实例,通过应用程序的根替换它,这样我们应用程序中都能获取它。 ✅ create:创建我们 AppBlocBloc 一个实例 BlocConsumer(...)

41310

Flutter响应式编程:Streams和BLoC

可能使用此信息的地方(无处,同一面,另一个页面,或者几个页面...), 这些信息可能被使用时(几乎是直接,几秒钟之后,永远不会......)。 .........此页面现在仅负责: 显示计数器,现在只必要刷新(即使页面不必知道) 提供按钮按钮,将会在counter面板上请求一个动作 此外,整个业务逻辑集中一个单独的类“IncrementBloc”...作为局部变量 你可以实例化BLoC的局部实例。 某些情况,此解决方案完全符合某些需求。...以下代码显示了通用BlocProvider的示例。 关于这种通用BlocProvider的一些解释 首先,如何将其作为provider使用?...不同BLoCs / Streams的编排 下图显示了如何使用主要3个BLoCBLoC的左侧,哪些组件调用Sink 右侧,哪些组件监听流 例如,MovieDetailsWidget调用inAddFavorite

4.1K90

Flutter 移动端架构实践:Widget-Async-Bloc-Service

显式 状态管理的示例是 Flutter 计数器,增量按钮,程序通过 setState() 对计数器进行值的递增。...以下是我用Flutter和Firebase实现的身份验证流程的示例: [image] 观察到的结果: 触发了登录事件,我们禁用了所有按钮显示CircularProgressIndicator,我们将加载状态设置为...Flutter重建窗口控件树,处理嵌套的StreamBuilders会导致调试过程变得很棘手。 这些因素都会让代码有额外的开销。...更新app本地的状态(例如,将状态从一个控件传递到另一个控件中)BLoC有更简单的替代方案,这个后文再。...无论如何,我发现BLoCs使用Firestore构建app时效果非常明显,其中数据通过流从后端流入app。 在这种情况,通常将流进行组合或使用RxDart对其执行转换,BLoC很擅长这个。

16K20

Flutter 状态管理】第一论: 对状态管理的看法与理解

拿我们最熟悉的计数器而言,点击按钮,修改状态信息,重新构建后,实现界面上数字变化的效果。 二、为什么需要管理 说到 管理 一词,你觉得什么情况需要管理?是 复杂,只有 复杂 才有管理的必要。...比如下面 page1 中,C 是数字信息,跳转到 page2 ,也要显示这个数值,且 R 按钮能要让 page1、page2 的数字都重置为 0。...2.通过 flutter_bloc 实现状态管理: 源码位置 我们前面说过,状态管理的目的在于:让状态可以共享及更新状态可以同步更新相关组件显示,且将状态变化逻辑和界面构建进行分离。...下面先简单看一界面效果: [1] 输入字符进行搜索,界面显示 github 项目 [2] 不同的状态显示不同的界面,如未输入、搜索中、搜索成功、无数据。 [3] 输入时防抖 debounce。...这样能带来另一个好处,数据模型确定后。repository 层和界面层完全可以同步进行开发,最后通过 Bloc 层将 repository 和 界面 进行整合。

1.2K20

Flutter&Flame 游戏 - 贰陆】pinball 源码分析 - 游戏主页

加载完成之后,就会进入到如下的主菜单界面,有个大大的 Play 按钮。 可以看到此时两个吉祥物是在运动的,而且背景中也会显示排行榜的信息。...如下所示:资源加载完毕,会显示 PinballGameLoadedView 组件: ---- 通过源码可以看出 PinballGameLoadedView 主要有 3 个部分,通过 Stack 进行叠放...如下是_PositionedGameHud 的源码,可以看出只有游戏处于 isPlaying 并且 !isGameOver 的状态,才会显示分数面板。...点击,通过 StartGameBloc 触发 PlayTapped 事件来通知游戏开始。 ---- 其中 ReplayButtonOverlay 结束游戏中的 Replay 按钮。...---- 另外,从中我们能学到一个非常实用的小知识:移动端通过 Game 对象可以发送下键盘的事件。这样移动端,可以通过扭的事件,来发送键盘事件,这样游戏中只需要考虑键盘事件即可。

76920

初学者的 Flutter bloc

当我们使用 Flutter Bloc,我们要在应用中创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state 中,真实的场景中,它会像这样: 用户点击按钮来获取游戏列表 事件被触发...,然后它会告知 Bloc 用户想获取游戏列表 Bloc 将会请求数据(比如从一个存储库,该存储库负责连接到 API 来获取数据) Bloc 有数据,它将决定数据是否成功,然后 emit 发射一个状态...我们了解这些后,下面可以应用到案例中 真实项目中使用 Flutter Bloc 在这个项目中,我们将从 games API 消费数据,获取关于游戏的信息并在页面中展示出来。...我们使用 Equatable 库来比较 Dart 中不同的对象,如果你们不知道这些知识,我们推荐你阅读 文档。...,用户可以点击其中一个分类,这个发生,我们将添加两个事件: GetGamesByCategory:获取类型过滤游戏。

9710

Flutter》-- 4.Flutter组件基础

Flutter中真正代表屏幕显示元素的类是Element。 大多数场景,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...4.3.2 按钮组件 Materail组件库中常见的按钮组件: RaisedButton:默认是带有阴影和灰色背景的按钮后阴影会变大; FlatButton:默认是背景透明并不带阴影的按钮后会有背景色...; OutlineButton:默认是一个带有边框、不带阴影且背景透明的按钮后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个可点击的图标按钮,不支持文字,默认没有背景,点击后会出现背景...所有Materail组件库的按钮都有两个相同点:一是时会有水波动画,另一个是都有一个onPressed属性来设置单击回调。...; BoxFit.cover:默认填充规则,保证长宽比不变的情况缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度会比例缩放,图片不会变形,超出显示空间部分会被剪裁

12.4K30

Flutter】自定义滚动开关

显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按钮后进行的切换交互,该开关将滚动到具有动画效果的另一侧,并且滚动该开关将更改图标和文本。...**colorOn:**此属性用于开关打开显示颜色。 **colorOff:**此属性用于开关为Off显示颜色。...*我们将添加textOn是字符串' Yes '表示开关打开文本显示按钮上;textOff是字符串' No '意味着开关关闭文本显示按钮上。...我们将添加colorOn表示,开关处于打开状态,颜色将显示按钮上;colorOff意味着开关处于关闭状态,颜色将显示按钮上。

33.3K60

180多个Web应用程序测试示例测试用例

28.检查所有页面上可用按钮的功能。 29.用户不能连续快速提交按钮来两次提交页面。 30.任何计算均应除以零误差。 31.第一个和最后一个位置为空白的输入数据应正确处理。...3.执行搜索操作至少需要一个过滤条件,请确保在用户提交页面未选择任何过滤条件显示正确的错误消息。...9.结果网格应以适当的列和行间距显示。 10.结果多于每页默认结果数,应启用分页。 11.检查下一,上一,第一和最后一的分页功能。 12.重复的记录不应显示结果网格中。...9.仅操作成功完成,才检查是否将数据提交到数据库。 10.如果事务失败,则应回滚数据。 11.应根据应用程序类型指定数据库名称,即测试,UAT,沙箱,实时(尽管这不是标准,但有助于数据库维护) 。...8.高峰负载情况检查CPU和内存使用情况。 安全测试测试方案 1.检查是否有SQL注入攻击。 2.安全页面应使用HTTPS协议。 3.页面崩溃不应显示应用程序或服务器信息。为此,应显示错误页面。

8.1K21

Flutter】362- 让前端开发者失业的技术,Flutter Web 初体验

第二是 Dart 运行时环境以及第三文本渲染布局引擎。 最底层的嵌入层,它所关心的是如何将图片组合到屏幕上,渲染变成像素。这一层的功能是用来解决跨平台的。...安装完成之后, AVD (Android Virtual Device Manager) 中,点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。代表了正确安装。 ?...Dart 插件 提供代码分析 (输入代码进行验证、代码补全等)。...输入 Project 名称 (如 flutterweb), 然后回车键 指定放置项目的位置,然后蓝色的确定按钮 等待项目创建继续,并显示 main.dart 文件。...总结 FLutter web 是 Flutter 的一个分支,开发完 App 之后,UI 层面的 FLutter 代码不修改的情况可以直接编译为 Web 版,基本可以做到代码 100% 复用,体验还不错

2.1K20

Flutter ——状态管理 | StreamBuild

####3.2 数据流变化时,可以刷新小部件。 Stream是一种订阅者模式,数据发生变化时,通知订阅者发生改变,重新构建小部件,刷新UI。 ###4.如何使用streamBuild?...StreamBuilder,而不需要任何setState: 我代码里注释了步骤(四步): import 'dart:async'; import 'package:flutter/material.dart...问题1 为何选择使用streamBuild 1.方法一使用StatefulWidget,刷新使用setstate(){},使用setstate(){}刷新,会将整个item 进行重新构建,整个item...2.方法二使用状态管理bloc,如果使用bloc,streamBuild中的stream 就因该传bloc的数据,如果我其它地方使用使用了这个item,那么这个stream就应该传...当然有兴趣的可以去实现一。 ###问题2.怎样才能不使用StatefulWidget?

2.7K31

Flutter常见开发问题

按钮到布局结构的一切都是小部件。这里的优势在于可定制性。想象一 Android 中的一个按钮。它具有文本等属性,可让您向按钮添加文本。...但是 Flutter 中的按钮不是将标题作为字符串,而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西,**而不会打破布局限制。...您运行 Flutter 项目,它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果我将一个图标从一个更改为另一个,则不必完全重建应用程序。这就是 Flutter调试构建如此庞大的原因。...**任何可以改变的东西,比如计数器计数、文本等,都可以成为 State 的一部分。想象一个计数器应用程序,主要的动态是计数器计数。计数改变,需要刷新屏幕以显示新值。

6.8K30

Flutter常见开发问题

想象一 Android 中的一个按钮。它具有文本等属性,可让您向按钮添加文本。但是 Flutter 中的按钮不是将标题作为字符串,而是另一个小部件。...您运行 Flutter 项目,它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果我将一个图标从一个更改为另一个,则不必完全重建应用程序。这就是 Flutter调试构建如此庞大的原因。...如果我是编程新手,想从移动端开发入手,应该从 Flutter 开始吗? 这有更多的两部分答案。 Flutter 非常适合编写代码,并且相同页面上的代码比 Android 或 iOS 应用程序少得多。...**任何可以改变的东西,比如计数器计数、文本等,都可以成为 State 的一部分。想象一个计数器应用程序,主要的动态是计数器计数。计数改变,需要刷新屏幕以显示新值。

6.7K20

flutter实战项目之博客项目

gitee https://gitee.com/itmxs/flutter_bloc_super 主分支默认空安全 image-20210928112956758 使用fvm版本控制 全局激活 pub...Flutter SDK 版本,如果尚未安装,它将下载 SDK;现在,您可以通过运行来检查项目中是否正在运行 flutter flutter;此外,您还可以通过再次调用来检查 Flutter SDK 版本是否设置...项目根路径执行:$ fvm use 2.5.1--force 完成上面的命令,会有个 .fvm 文件夹生成,然后配置 IDE,方法同上。可以愉快的玩耍 flutter 了。...改进迁移的结果 分析结果推导了错误的可空性,你可以添加临时的提示标记来改变建议的编辑: 迁移工具的 Edit Details 窗格中,你可以通过 Add /\*?...\*/ hint 按钮来添加提示标记。 这些按钮,相应的标记会立刻添加到代码中,并且 无法撤销。如果你想删除标记,可以和平常一样使用代码编辑器删除它。

80710

一种更优雅的Flutter Dialog解决方案

还得view层把context传到bloc或者cubit里面。。。...: ^1.3.1 使用 主入口配置 主入口这地方需要配置,这样就可以不传BuildContext使用Dialog了 只需要在MaterialApp的builder参数处配置即可 void main...各种尝试,实在没办法获取到背景的触摸事件,此种穿透背景的方案只能放弃 Listener、behavior 这种方案,成功实现想要的穿透效果,这里了解下behavior的几种属性 deferToChild:仅一个孩子被命中测试击中...很明显translucent是有希望的,尝试了几次,然后成功实现了想要的效果 注意,这边有几个坑点, 务必使用Listener控件来使用behavior属性,使用GestureDetector中behavior...大型项目推荐:fish_redux使用详解---看完就会用! flutter_bloc使用解析---骚年,你还在手搭bloc吗!

3.2K41

Flutter | 常用组件

,样式如下: 字体 flutter使用字体需要两个步骤,首先是 pubspec.yaml文件中声明,然后通过 textStyle 属性使用字体 flutter: fonts:...this.color, //按钮背景颜色 this.disabledColor,//按钮禁用时的背景颜色 this.highlightColor, //按钮的背景颜色 this.splashColor...this.elevation = 2.0, //正常状态的阴影 this.highlightElevation = 8.0,//的阴影 this.disabledElevation =...,如果只设置了其中的一个,则另一个则会比例缩放,但是可通过 fit 属性来适应规则 fit:用于图片的显示空间和图片本身大小不同的时候指定图片的适应模式 image.png color 和...,使用 FadeInImage 之后会在图片的加载过程中显示一个占位符,图片加载完成之后显示淡入 ICON Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片

11.4K30

Flutter 中 stateless 和 stateful widget 的区别

小部件的状态 状态是构建期间同步读取小部件类的信息 - 也就是说,小部件显示屏幕上并且如果信息在其生命周期内发生更改时可能会发生变化。...出于这个原因,外观和属性小部件的整个生命周期中保持不变。 当我们描述的 UI 部分不依赖于任何其他小部件,无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。...之后,小部件将打印屏幕上。 但是如果我们希望它在有动作更新,我们必须制作一个有状态的小部件。 有状态的小部件 UI 的某些部分必须在运行时动态更改时,使用有状态小部件。...有状态的小部件可以应用程序运行时多次重绘自己。 当我们描述的 UI 部分动态变化时,有状态小部件很有用。如果我们创建一个按钮小部件,每次用户单击该按钮都会更新自身,这就是一个有状态小部件。...一旦我们调用这个小部件并按按钮,我们就会让文本字段的值自动改变。 在这种类型的应用程序中,我们可以通过实现. 是一种在有状态小部件类中调用的方法。每次调用时,此方法都会更改有状态小部件的值。

2.2K10

【新!超详细】Figma组件属性完全指南

何时使用实例交换属性? 您想在另一个组件中交换组件使用它。例如,您有一个按钮,您可以通过属性面板更改按钮内部的图标。 目前,无法交换变体。...您将其设置为 true ,它默认显示;如果将其设置为 false,则默认情况下不会出现。 变体 您可以从右侧菜单中添加变体。 首先,让我们创建一个变体组。...更改列表中的变体顺序 您单击一个实例并想要更改变体,您希望它字母顺序排列,或者最流行的变体顶部。 变体行上,单击详细信息图标。在打开的窗口中,拖放变体。...快速交换组件 如果您想快速交换组件,可以将它们全部放在一个页面上或一个画板上。由于它们都将在同一面上,因此它们将直接出现在交换窗口中,您无需导航即可找到它们。...属性列表 如果您有一个具有布尔值和另一个属性的组件,请对属性列表进行排序,布尔值位于顶部,然后是其他属性。您将布尔值切换为关闭另一个属性会消失并且列表会移动。

10.9K22

Windows中的键盘快捷方式大全

Ctrl + Alt + Shift + 箭头键 分组或磁贴在“开始”菜单中获得焦点,请将其指定方向移动 Ctrl + 箭头键(用来移动到某个项目)+ 空格键 在窗口中或桌面上选择多个单独的项目...(或 Shift + Insert) 粘贴选定文本 Ctrl + M 进入标记模式 Alt + 选择键 阻止模式中开始选择 箭头键 指定方向移动光标 Page Up 将光标向上移动一 Page Down...CD Shift 防止 CD 自动播放 左 Alt + Shift 启用多种输入语言切换输入语言 Ctrl+Shift 启用多个键盘布局切换键盘布局 右或左 Ctrl + Shift 更改从右到左阅读语言的文本阅读方向...”模式 pi 按钮 V “科学型”模式 F-E 按钮 X “科学型”模式 Exp 按钮 Q “科学型”模式 x^2 按钮 Y “科学型”模式 x^y 按钮 # “科学型”模式...“程序员”模式 Rsh 按钮 % “程序员”模式 Mod 按钮 ( “程序员”模式 ( 按钮 ) “程序员”模式 ) 按钮 | “程序员”模式 Or 按钮 ^ “程序员

5.6K20

Flutter 2.8 release 发布,快来看看新特性吧

Profiling 以便更好地了解应用程序中的性能问题,应用程序启动启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式也会发送这些事件...在按 “Profile app start up” 按钮并加载应用程序启动配置文件后,开发者将看到为配置文件选择的 “AppStartUp” 用户标签,另外还可以通过可用用户标签列表中,选择此用户标签过滤器...如果开发者使用的是 google_maps_flutter 插件或 video_player 插件的 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像的建议,那么您其实已经使用...100% Dart 中实现用于特定平台的功能,所以没有任何本机类可以使用,但你仍想将你的包指定为仅支持某些平台,请改用该dartPluginClass 属性: flutter: plugin:... dev 未来几个月停用该频道,请考虑 beta 或 master频道,具体取决于对问题的容忍度以及对最新和最好的需求。

4.2K20
领券