I have issues with my Material Widgets (AppBar widget as an example). I tried to find a solution in other SO questions but nothing is working. In production App bar's back button, and some other material files aren't working too, even material clipboard.
[Edit] I found out that the issue was with not supported language (Turkmen/Russian - two main languages of my app) in some non-global (Chinese, Hindu) phones. There were no issues with other iOS / Android devices.
So there is my MaterialApp file:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:peydaly.market/blocs/markets_provider.dart';
import 'package:peydaly.market/generated/l10n.dart';
import 'package:peydaly.market/screens/loading_screen.dart';
import 'blocs/markets_provider.dart';
class App extends StatelessWidget {
@override
Widget build(context) {
return MarketsProvider(
child: MaterialApp(
localizationsDelegates: [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
debugShowCheckedModeBanner: false,
darkTheme: buildDarkMode(),
theme: buildLightMode(),
title: 'Peýdaly.Market',
home: LoadingScreen(),
),
);
}
ThemeData buildLightMode() {
return ThemeData.light().copyWith(
buttonTheme: ButtonThemeData(
minWidth: 10,
),
primaryColor: Colors.grey[100],
backgroundColor: Colors.white,
iconTheme: IconThemeData(
color: Colors.grey[900],
),
appBarTheme: AppBarTheme(
centerTitle: true,
brightness: Brightness.light,
iconTheme: IconThemeData(
color: Colors.grey[900],
),
actionsIconTheme: IconThemeData(
color: Colors.grey[900],
),
// brightness: Brightness.light,
color: Colors.white,
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.grey[900],
fontWeight: FontWeight.w600,
),
),
elevation: 0,
),
);
}
ThemeData buildDarkMode() {
return ThemeData.dark().copyWith(
buttonTheme: ButtonThemeData(
minWidth: 10,
),
backgroundColor: Colors.grey[900],
primaryColor: Colors.grey[850],
iconTheme: IconThemeData(
color: Colors.white,
),
appBarTheme: AppBarTheme(
centerTitle: true,
brightness: Brightness.dark,
iconTheme: IconThemeData(
color: Colors.white,
),
actionsIconTheme: IconThemeData(
color: Colors.white,
),
// brightness: Brightness.dark,
color: Colors.grey[900],
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.grey[100],
fontWeight: FontWeight.w600,
),
),
elevation: 0,
),
);
}
}
My pubspec.yaml file:
name: peydaly.market
description: Subscription Online Groceries delivery service app for mobile devices.
version: 0.2+23
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
animations: ^1.1.2
cached_network_image: ^2.2.0+1
carousel_slider: ^2.3.1
crypto: ^2.1.5
cupertino_icons: ^1.0.0
cupertino_rounded_corners: ^1.0.3
date_format: ^1.0.9
flare_flutter: ^2.0.6
flutter_polyline_points: ^0.2.4
futuristic: ^0.1.3
google_maps_flutter: ^1.0.6
http: ^0.12.1
intl: 0.16.1
location: ^3.0.2
modal_bottom_sheet: ^0.2.2
path_provider: ^1.6.14
rive: ^0.6.3
rxdart: ^0.24.1
shimmer: ^1.1.1
splashscreen: ^1.3.4
sqflite: ^1.3.1+1
superellipse_shape: ^0.1.5
dev_dependencies:
flutter_test:
sdk: flutter
pedantic: ^1.4.0
flutter:
uses-material-design: true
generate: true
assets:
- assets/social/
- assets/playlists/
- assets/avatar/
- assets/sql/
flutter_localizations:
sdk: flutter
flutter_intl:
enabled: true
class_name: S
main_locale: tm
flutter_icons:
android: "launcher_icon"
ios: true
image_path: "assets/icon/icon.png"
And my debug console error.
═══════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building AppBar(dirty, dependencies: [_LocalizationsScope-[GlobalKey#2fd79]], state: _AppBarState#848b3):
No MaterialLocalizations found.
AppBar widgets require MaterialLocalizations to be provided by a Localizations widget ancestor.
The material library uses Localizations to generate messages, labels, and abbreviations.
To introduce a MaterialLocalizations, either use a MaterialApp at the root of your application to include them automatically or add a Localization widget with a MaterialLocalizations delegate.
The specific widget that could not find a MaterialLocalizations ancestor was: AppBar
dirty
dependencies: [_LocalizationsScope-[GlobalKey#2fd79]]
state: _AppBarState#848b3
The ancestors of this widget were
Scaffold
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#2fd79], Directionality, MediaQuery, _EffectiveTickerMode]
state: ScaffoldState#0f235(tickers: tracking 2 tickers)
CitySelectionScreen
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#2fd79], MarketsProvider]
state: _CitySelectionScreenState#fb711
MaterialApp
state: _MaterialAppState#44c02
MarketsProvider
App
...
The relevant error-causing widget was
AppBar
lib/screens/city_selection_screen.dart:53
When the exception was thrown, this was the stack
#0 debugCheckHasMaterialLocalizations.<anonymous closure>
package:flutter/…/material/debug.dart:74
#1 debugCheckHasMaterialLocalizations
package:flutter/…/material/debug.dart:94
#2 _AppBarState.build
package:flutter/…/material/app_bar.dart:509
#3 StatefulElement.build
package:flutter/…/widgets/framework.dart:4744
#4 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4627
...
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════
No MaterialLocalizations found.
The ancestors of this widget were
Scaffold
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#2fd79], Directionality, MediaQuery, _EffectiveTickerMode]
state: ScaffoldState#0f235(tickers: tracking 2 tickers)
CitySelectionScreen
dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#2fd79], MarketsProvider]
state: _CitySelectionScreenState#fb711
MaterialApp
state: _MaterialAppState#44c02
MarketsProvider
App
...
The relevant error-causing widget was
AppBar
lib/screens/city_selection_screen.dart:53
════════════════════════════════════════════════════════════════════════════════
So the issue was with App localization issues of Material UI elements on unsupported devices, so to add support to it, I added these lines to my App file:
supportedLocales: [
const Locale('ru'),
const Locale('tm'),
...S.delegate.supportedLocales,
],