after upgrade the flutter from 3.3.10 to 3.7.0 this error start appear after change the state of textStyle of Material widget:

Failed to interpolate TextStyles with different inherit values.

there is a simple exemple:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool state = false;

  void _changeState() {
    setState(() {
      state = !state;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Material(
          borderRadius: const BorderRadius.all(Radius.circular(20.0)),
          elevation: 2,
          textStyle: !state ? const TextStyle(color: Color(0xff4c4c4c)) : null,
          child: const Text('Click me')
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _changeState,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

CodePudding user response：

This is because, when you toggle the state of the textStyle property, it's going from null to a TextStyle object. Because null does not have any inherit property, it's trying to interpolate between two different inherit values, which is not possible.

Try to provide default text style for the Material widget so that it will always have a textstyle to inherit from.

Material(
    borderRadius: const BorderRadius.all(Radius.circular(20.0)),
    elevation: 2,
    textStyle: !state && Theme.of(context).textTheme.bodyText1 != null
        ? Theme.of(context).textTheme.bodyMedium.copyWith(color: Color(0xff4c4c4c))
        : Theme.of(context).textTheme.bodyMedium,
    child: const Text('Click me')
);