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

测试:找不到MaterialLocalizations。AppBar小部件需要提供MaterialLocalizations

MaterialLocalizations 是 Flutter 中的一个类,它提供了一种将 Flutter 应用程序本地化为特定地区的方式。它是一个包含了多种本地化信息的接口,用于提供给应用程序中的小部件使用。

在 Flutter 应用程序中,如果你在使用 AppBar 小部件时遇到了 "找不到 MaterialLocalizations" 的错误,可能是因为你没有将 MaterialLocalizations 实例传递给 AppBar 小部件。AppBar 小部件通常需要与 MaterialLocalizations 一起使用,以获取本地化信息,例如应用程序的标题、导航按钮的文本等等。

要解决这个问题,你可以使用 MaterialApp 小部件将 MaterialLocalizations 注入到应用程序中的整个小部件树中。MaterialApp 小部件是 Flutter 应用程序的根小部件,可以用来配置应用程序的主题、本地化和其他全局属性。

下面是一个示例代码,演示了如何在 Flutter 应用程序中正确地使用 AppBar 小部件,并提供 MaterialLocalizations 实例:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // 美式英语
        const Locale('zh', 'CN'), // 中文简体
      ],
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text(MaterialLocalizations.of(context).appBarTitle),
        ),
        body: Container(
          child: Center(
            child: Text('Hello World'),
          ),
        ),
      ),
    );
  }
}

在上面的示例中,我们在 MaterialApp 的 localizationsDelegates 属性中添加了 GlobalMaterialLocalizations.delegate 和 GlobalWidgetsLocalizations.delegate,这样就将 MaterialLocalizations 注入到了应用程序的小部件树中。

同时,我们还通过 supportedLocales 属性指定了支持的地区,以便正确地本地化应用程序的文本。

在 AppBar 的标题中,我们使用了 MaterialLocalizations.of(context).appBarTitle 来获取本地化的标题文本。这样,就能够正确地显示 AppBar 中的标题,同时避免了 "找不到 MaterialLocalizations" 的错误。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上链接地址仅供参考,具体的产品选择应根据实际需求和情况进行评估和决策。

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

相关·内容

【Flutter 实战】国际化及App 内切换语言功能

使App支持国际化 当应用程序支持不同语言的时候,就需要对应用程序进行国际化,当然国际化不仅仅指文字,也可以是布局、图片等。...Flutter 已经提供了组件来实现国际化,下面是实现国际化的步骤: 在 MaterialApp.supportedLocales 中添加支持的语言: MaterialApp( title: 'Flutter...添加系统国际化支持 前面说到 Scaffold 不要添加 AppBar 数据,否则报错,填上看其异常信息: Scaffold( appBar: AppBar(), body:...找不到MaterialLocalizations 是什么呢?...监听系统语言切换 当更改系统语言设置时,Localizations 组件将会重新 build,而用户就看到了语言的切换,这个过程是系统完成的,代码并不需要主动去监听语言切换,但如果想监听语言切换可以通过

6.8K20

Flutter | 一文搞懂 BuildContext

复制代码 我们在写代码的过程中还会发现一个问题,就是要更新的状态不是必须要写在 setState 里面,只要写在 setState 上面 即可,这样也没有问题,例如有些其他的响应式框架就没有这个回调,只提供了一个通知页面刷新的方法...所以 Flutter 在 setState 中加了一个回调,我们可以需要更新的状态直接放在回调里面,和状态没关系的放在外边即可。...localizations = Localizations.of(context, MaterialLocalizations); final ScriptCategory...但是一般这种情况下,我们是不用多创建一个组件的,所以我们还需要一个更好的解决方案,如下: class _MyHomePageState extends State { @override...Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(widget.title

53030

flutter系列之:Material主题的基础-MaterialApp

默认情况下MyHomePage会返回一个类似下面代码的Scaffold: return Scaffold( appBar: AppBar( title: Text(widget.title...为了简单起见,flutter提供了两个简洁的Theme创建方式,分别是ThemeData.light和ThemeData.dark。...默认情况下theme就是app将会使用的theme,但是考虑到现在流行的theme切换的情况,所以也提供了darkTheme这个选项。...WidgetsApp就是MaterialApp底层的Widget,它包装了应用程序通常需要的许多小部件。WidgetsApp的一个主要功能就是将系统后退按钮绑定到弹出导航器或退出应用程序。...learn-flutter.git更多内容请参考 http://www.flydean.com/06-flutter-material-materialapp/最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的技巧等你来发现

1.5K10

flutter系列之:Material主题的基础-MaterialApp

默认情况下MyHomePage会返回一个类似下面代码的Scaffold: return Scaffold( appBar: AppBar( title: Text(widget.title...为了简单起见,flutter提供了两个简洁的Theme创建方式,分别是ThemeData.light和ThemeData.dark。...默认情况下theme就是app将会使用的theme,但是考虑到现在流行的theme切换的情况,所以也提供了darkTheme这个选项。...supports ], // ... ) supportedLocales中配置的是支持的locales,localizationsDelegates用来生成WidgetsLocalizations和MaterialLocalizations...WidgetsApp就是MaterialApp底层的Widget,它包装了应用程序通常需要的许多小部件。 WidgetsApp的一个主要功能就是将系统后退按钮绑定到弹出导航器或退出应用程序。

94310

flutter开发技巧汇总

你可以可以直接使用CupertinoTabScaffold这个构造你的tab框架,这个笔者验证过,切换的时候,不会导致每次都initState, 2、listview 加divider的问题 这个实际上是一个技巧...divider,那么就使用这种,如果不需要,更加方便的是Divider 3、统一app的字体。...4、你也许想实现一个顶部弹框,但是似乎flutter只提供了showModalBottomSheet这种,或者中间的弹框,而且占据的控件不会铺满整个width,所以 image.png 一个这样的弹框应该如何实现呢...Selector(), theme: Theme.of(context, shadowThemeOnly: true), barrierDismissible: true, barrierLabel: MaterialLocalizations.of...如果你遇到了代码复用或者说页面规模太大需要用很好的模式来分离逻辑的问题,不妨了解一下我的另外一篇文章flutter中使用bloc 9、有时候我们需要一个背景为图片,而且边缘是有弧度的背景,那么,有没有什么很好的办法来做到

1.7K81

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

收缩(不知道是不是 bug,当 AppBar 下面的部件没有被 AppBar 覆盖的时候,不会自动收缩) // 当下滑到一定比例,会自动把 AppBar 展开 // snap...以上的效果图把 SliverFillRemaining 换成列表 SliverFixedExtentList 效果可能会更加明显,这边给小伙伴自己替换测试吧。...不过 Flutter 也提供了专门的部件 SliverPadding 使用方式同 Padding,但是需要传入一个 sliver 作为子类。...SliverPersistentHeader Flutter 中,为我们提供了这么一个作为头部的部件 SliverPersistentHeader,这个部件可以根据滚动的距离缩小高度,有点类似 SliverAppBar...SliverPersistentHeaderDelegate 需要提供一个最大值,最小值,展示内容,以及更新部件条件 比如我们需要展示一个最大高度 300,最小高度 100,居中的文字,那么我们可以这么写这个代理类

2.1K30

Flutter 构建完整应用手册-列表 顶

我们还将使用内置的ListTile部件来为我们的项目提供一个可视结构。...使用长列表 标准的ListView构造函数适用于列表。 为了处理包含大量项目的列表,最好使用ListView.builder构造函数。...final items = new List.generate(10000, (i) => "Item $i"); 2.将数据源转换成部件 为了显示我们的字符串列表,我们需要将每个字符串呈现为一个部件...路线 使用不同类型的条目创建数据源 将数据源转换为部件列表 1.使用不同类型的条目创建数据源 项目类型 为了在列表中表示不同类型的项目,我们需要为每种类型的项目定义一个类别。...一般来说,我们希望提供一个builder函数来检查我们正在处理的项目类型,并返回该类型项目的相应部件。 在这个例子中,使用is关键字来检查我们正在处理的项目类型可能非常方便。

2.5K20

使用Flutter开发微信程序:构建一个简单的天气预报程序

图片这里将介绍如何使用Flutter开发一个简单的天气预报程序,并提供相应的代码示例。1. 准备工作在开始之前,确保你已经安装了Flutter SDK,并且已经配置好了开发环境。...另外,你还需要注册一个微信程序开发者账号,并获取到对应的AppID。2....msg: '获取天气数据失败'); } } @override Widget build(BuildContext context) { return Scaffold( appBar...测试运行现在,你可以使用以下命令在模拟器或真机上运行你的程序:flutter runFlutter将会编译并运行你的程序,并在模拟器或真机上展示出来。7....当然,这只是一个入门示例,实际项目中可能会涉及更多的功能和复杂的业务逻辑,我们还需要在相关的深入学习和研究。

3.1K30

【Flutter 专题】40 日常小问题小结 (一)

问题一:嵌套权重异常 和尚在做 Android 时为了屏幕适配,用到权重/比例比较多,Flutter 也提供了实现权重的功能,和尚尝试过 权重基本用法,当时没有涉及到嵌套权重的问题,和尚想要实现的是左侧一张大图...,右侧垂直两张图,水平方向 1:1 均分,和尚用 Expanded 配合 flex 在嵌套权重时遇到如下问题,于是重新研究一下权重的使用; ?...问题二:SnackBar 找不到 Context 和尚在尝试 SnackBar 时总是找不到上下文环境而打不开; ?...尝试一: 和尚将整体放在一个 Widget 中,传入 BuildContext 参数,无果,依旧是找不到上下文环境; 尝试二: 按官网推荐,可新建一个 Builder 动态添加...BuildContext,但是和尚又出现新的问题,不可在 Builder 中返回无大小的 Container;仔细找了很久发现 Builder 需要 return 一个 Widget,太粗心; ?

81131

Flutter 构建完整应用手册-设计基础知识 顶

在这种情况下,我们需要在屏幕底部显示SnackBar,而不会与其它重要的部件重叠,例如FloatingActionButton!...例如,如果他们意外删除了一条消息,我们可以提供撤消该更改的操作。 为了达到这个目的,我们可以为SnackBar部件提供额外的action。...在这个例子中,我们将创建一个带有3个Tab小部件的TabBar,并将其放置在AppBar中。...4.在特定的部件中使用字体 如果我们想将字体应用于特定的部件,比如Text部件,我们可以向部件提供一个TextStyle。 在这个例子中,我们将RobotoMono字体应用于单个Text部件。...Scaffold部件为遵循Material Design Guidelines的应用程序提供了一致的可视化结构。

7.1K10

Flutter 入门指北之基础部件

StatelessWidget 是状态不可变部件,通过其构建的部件一般用来展示固定内容,例如需要展示固定的功能按钮列表,不需要根据不同界面状态进行修改其展示内容 StatefulWidget 是可改变状态的部件...,比如我们需要通过网络或者数据库获取数据,然后修改部件锁展示的数据内容,则需要通过 StatefulWidget 来构建。...const Scaffold({ Key key, this.appBar, // 界面顶部的那条栏,这边需要返回一个 AppBar 实例 this.body, // 界面的内容部分...this.actions, // AppBar 末尾悬浮的一些操作组件,例如常见的会在末尾设置一个「...」按钮,点击弹出一个 menue 提供给用户操作选择 this.flexibleSpace...IconData 实例,flutter 提供了很多图标, // 但是实际情况我们需要加入我们自己的图标,这边再埋坑【坑3】 // size 为图标显示的大小

1.3K30

Flutter 中使用Chip 小部件【Flutter专题30】

本文是关于 Flutter 中的 Chip 小部件。我们将大致了解小部件的基本原理,然后通过代码来实现它。事不宜迟,让我们开始吧。 概述 典型的chip是一个圆角的小盒子。...一些常用的有: avatar:在标签前显示一个图标或图像。 backgroundColor : chip的背景颜色。 padding:chip内容周围的填充。...但是,对于大多数应用程序,我们不需要超过一半。 简单示例 这个例子向您展示了一种同时显示多个chip的简单使用的方法。我们将使用Wrap小部件作为chip列表的父级。...截屏: image-20220125100331474 代码: Scaffold( appBar: AppBar( title: const Text('大前端之旅'),...,并经历了不止一个使用该小部件的示例。

2.8K20
领券