首页
学习
活动
专区
工具
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(...)

1.1K10

Flutter响应式编程:Streams和BLoC

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

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

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

    16.1K20

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

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

    1.6K20

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

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

    78920

    初学者的 Flutter bloc

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

    21210

    《Flutter》-- 4.Flutter组件基础

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

    12.5K30

    【Flutter】自定义滚动开关

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

    33.4K60

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

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

    8.3K21

    【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.2K20

    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?

    3K31

    一种更优雅的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.8K41

    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 按钮来添加提示标记。 按下这些按钮,相应的标记会立刻添加到代码中,并且 无法撤销。如果你想删除标记,可以和平常一样使用代码编辑器删除它。

    85310

    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.3K10

    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.7K21

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

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

    12.4K22

    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
    领券