Hot Reload will make app restart

[taichushouwang]

When I use Themed container MaterialApp in function main, I edit one of the secondary page, and then I click hot reload in the android studio, app will rebuild all pages, and then return the home page, not keep in the secondary page as usual.

[marcglasberg]

Hey, you are maybe doing something wrong, but it's impossible for me to help you without some code for me to run. Could you please create a minimum runnable code that demonstrates the problem, in a single file, and post it here for me? It must be the smallest possible code, with no extra stuff that doesn't matter in it. If I can run it and see the problem I have a chance of helping. Thanks.

[taichushouwang]

Thanks for reply, I find the reason. In the file (plugins/themed/lib/src/themed.dart), for the _InheritedConstTheme, you set an object key key: ValueKey<Object>(Object()), every time I switch theme, it will rebuild, and then all page will also rebuild, it make app go back to the home page. And also I test in the demo example, it also have same behaving.

[hoangsang17th]

@marcglasberg below is code to reproduce

import 'package:flutter/material.dart';
import 'package:themed/themed.dart';

/// This example demonstrates:
/// 1) The [Themed] package is compatible with [Theme] and [ThemeData].
/// 2) We can use the `const` keyword.
/// 3) An extension allows us to add a Color to a TextStyle.

class MyTheme {
  static const color1 = ColorRef(Colors.white);
  static const color2 = ColorRef(Colors.blue);
  static const color3 = ColorRef(Colors.green);

  static const mainStyle = TextStyleRef(
    TextStyle(fontSize: 16, fontWeight: FontWeight.w400, color: MyTheme.color1),
  );
}

Map<ThemeRef, Object> anotherTheme = {
  MyTheme.color1: Colors.yellow,
  MyTheme.color2: Colors.pink,
  MyTheme.color3: Colors.purple,
  MyTheme.mainStyle: const TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w900,
    color: MyTheme.color1,
  ),
};

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Themed(
      child: MaterialApp(
        title: 'Themed example',
        //
        // 1) The [Themed] package is compatible with [Theme] and [ThemeData]:
        theme: ThemeData(
          primaryColor: MyTheme.color2,
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(backgroundColor: MyTheme.color2),
          ),
        ),
        //
        home: const EmptyPage(),
      ),
    );
  }
}

class EmptyPage extends StatelessWidget {
  const EmptyPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Empty page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => MyHomePage()),
            );
          },
          child: const Text('Go to home page'),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //
        // 2) We can use the `const` keyword:
        title: const Text('Themed example', style: MyTheme.mainStyle),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //
            // 2) We can use the `const` keyword:
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    color: MyTheme.color3,
                    child: const Text(
                      'This is some text!',
                      style: MyTheme.mainStyle,
                    ),
                  ),
                  //
                  const SizedBox(height: 30),
                  //
                  Container(
                    color: MyTheme.color3,
                    child: Text(
                      'This is another text!',
                      // 3) An extension allows us to add a Color to a TextStyle:
                      style: MyTheme.mainStyle + Colors.black,
                    ),
                  ),
                ],
              ),
            ),
            //
            Container(width: double.infinity, height: 2, color: Colors.grey),
            //
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _button1(),
                  _button2(),
                  _button3(),
                ],
              ),
            ),
            //
          ],
        ),
      ),
    );
  }

  ElevatedButton _button1() {
    return ElevatedButton(
      onPressed: () {
        if (Themed.ifCurrentThemeIs(anotherTheme))
          Themed.clearCurrentTheme();
        else
          Themed.currentTheme = anotherTheme;
      },
      child: Text(
        Themed.ifCurrentThemeIs(anotherTheme)
            ? 'Back to default theme'
            : 'Apply another theme',
      ),
    );
  }

  ElevatedButton _button2() {
    return ElevatedButton(
      onPressed: () {
        if (Themed.ifCurrentTransformColorIs(ColorRef.shadesOfGreyTransform))
          Themed.clearTransformColor();
        else
          Themed.transformColor = ColorRef.shadesOfGreyTransform;
      },
      child: Text(
        Themed.ifCurrentTransformColorIs(ColorRef.shadesOfGreyTransform)
            ? 'Remove color transform'
            : 'Shades of grey transform',
      ),
    );
  }

  ElevatedButton _button3() {
    return ElevatedButton(
      onPressed: () {
        if (Themed.ifCurrentTransformTextStyleIs(largerText))
          Themed.clearTransformTextStyle();
        else
          Themed.transformTextStyle = largerText;
      },
      child: Text(
        Themed.ifCurrentTransformTextStyleIs(largerText)
            ? 'Remove font transform'
            : 'Larger font transform',
      ),
    );
  }

  static TextStyle largerText(TextStyle textStyle) =>
      textStyle.copyWith(fontSize: textStyle.fontSize! * 1.5);
}