Flutter AppBarTheme 类构造函数已弃用

Question

In beginning to learn Flutter cross-platform application development, I am following along Nick Manning's Flutter Course - Full Tutorial for Beginners (Build iOS and Android Apps) . However, at 43:47 of the video, I am getting the following error .

Essentially, the App class is the class called by the runApp() method of Main's runApp method. The code in question is the appBarTheme parameter of the ThemeData widget. A constant named AppBarTextStyle is given as the argument for the TextTheme constructor, which is in turn an argument for AppBarTheme. At the moment, the program would not really achieve any constructive output, but I am trying to set the text theme for the remainder of the program which does not work.

The code for app.dart and style.dart is given below.

// app.dart

import 'package:flutter/material.dart';
import 'screens/location_detail/location_detail.dart';
import 'style.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocationDetail(),
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          textTheme: TextTheme(title: AppBarTextStyle),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

const LargeTextSize = 26.0;
const MediumTextSize = 20.0;
const bodytextSize = 16.0;

const String FontNameDefault = "Montserrat";

const AppBarTextStyle = TextStyle(
  fontFamily: FontNameDefault,
  fontWeight: FontWeight.w300,
  fontSize: MediumTextSize,
  color: Colors.white,
);

After looking at the FlutterAppBarTheme class API documentation , it appears that the constructor for AppBarTheme had been deprecated since the release of the video. This is the deprecation message given in the Flutter documentation:

@Deprecated('This property is no longer used, please use systemOverlayStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.')

As prompted, I tried replacing the default constructor with the suggested named constructor, systemOverlayStyle. But this was to no avail, as I received the following error message .

I have no idea how to fix my code and would very much appreciate some help. Thanks in advance!

Answer 1

In order to change appBar text theme, you need to use toolbarTextStyle and titleTextStyle .

theme: ThemeData(
  appBarTheme: AppBarTheme(
    toolbarTextStyle: TextStyle(..),
    titleTextStyle: TextStyle(..),
  ),
),

It is better with extending parent theme

A better rich content is cookbook/design/themes

Answer 2

You should use it like this instead of textTheme :

 MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          color: darkBlue,
          toolbarTextStyle: const TextTheme(
            headline6: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ).bodyText2,
          titleTextStyle: const TextTheme(
            headline6: const TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ).headline6,
        ),
      ),
      home: SafeArea(
        child: const Scaffold(
          body: MyStatefulWidget(),
        ),
      ),
    );