Question 80156 in Flutter Question posted in
The official Flutter documentation can be found here.

getX flutter package use default theme style instead of my custom theme

Why when I switch page using Get(()=> Page2 of getX package, the app go back to default theme colors?
I have a custom theme with yellow color, but then it goes back to the flutter blue default color.
Am I missing something?

my code

appBar: AppBar(
    title: Text('Profile'),
    actions: [
      IconButton(
        icon: Icon(Icons.edit_note_outlined), onPressed: () {
          setState(() {
            /*isVisible= !isVisible;
            isReadOnly = !isReadOnly;*/
          });
          Get.to(
              AddNewProduct(),
              duration: Duration(milliseconds: 300),
              transition: Transition.fade
          );
      },
      ),
    ],
  ),

my main

   Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(GetMaterialApp(
      home: const MyApp(),)
  );
}

my custom theme

@override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter app',
       theme: ThemeData(
         primarySwatch: Colors.amber,
         buttonTheme: ButtonTheme.of(context).copyWith(
           textTheme: ButtonTextTheme.primary,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(25.0)
           ),
         )
       ),
       home: const MyHomePage(title: 'Home'),
     );
    }

enter image description here

enter image description here

Tags:

4

Answers


  1. 0

    In your case you are using two app widgets:

    • GetMaterialApp in root
    • MaterialApp in MyApp

    But you have to use only GetMaterialApp.

    In your main function remove GetMaterialApp

    runApp(const MyApp(),);

    In your MyApp widget replace MaterialApp with GetMaterialApp

    @override
Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter app',
      theme: ThemeData(
          primarySwatch: Colors.amber,
          buttonTheme: ButtonTheme.of(context).copyWith(
            textTheme: ButtonTextTheme.primary,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)
            ),
          )
      ),
      home: const MyHomePage(),
    );
  }

    ANSWER THAT DEPENDS ON CONTEXT

    Let’s look on structure of your widget tree

    GetMaterialApp
  Builder (context1)
    MaterialApp <-- here you are setup your theme
     Scaffold
        AppBar
           Navigator.of(context1).push(MaterialPageRoute(builder: (_) => AddNewProduct()));
        body: ...

    As you can see when you are navigating to the AddNewProduct screen you request context from the Builder widget where your theme is not set up and you launch a new screen with the default theme

    To solve this you have two options:

    • wrap Scaffold with another Builder widget
    • move everything that is related to body property to a separate widget

    I prefer the second option:

    runApp(GetMaterialApp(home: Builder(builder: (context) {
    return MaterialApp(
      title: 'Flutter app',
      theme: ThemeData(
          primarySwatch: Colors.amber,
          buttonTheme: ButtonTheme.of(context).copyWith(
            textTheme: ButtonTextTheme.primary,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)),
          )),
      home: const HomeWidget(),
    );
  })));

    And your HomeWidget:

    class HomeWidget extends StatelessWidget {
  const HomeWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Profile'),
          actions: [
            IconButton(
              icon: Icon(Icons.edit_note_outlined),
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (_) => AddNewProduct()));
              },
            ),
          ],
        ),
        body: ... your content here...
  }
}
    Login or Signup to reply.
  2. 0

    You are using two MaterialApp classes. The ‘normal’ one and the GetMaterialApp. You should get rid of the normal one, and move all parameters to the GetMaterialApp. GetMaterialApp replaces MaterialApp. So like

       Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(GetMaterialApp(
       title: 'Flutter app',
       theme: ThemeData(
         primarySwatch: Colors.amber,
         buttonTheme: ButtonTheme.of(context).copyWith(
           textTheme: ButtonTextTheme.primary,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(25.0)
           ),
         )
       ),
       home: const MyHomePage(title: 'Home'),  );
}

    You probably don’t need your MyApp class anymore. Or alternatively replace the MaterialApp in MyApp with GetMaterialApp and remove it from main like

      runApp(const MyApp());
    Login or Signup to reply.
  3. 0

    change

     Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(GetMaterialApp(
      home: const MyApp(),)
  );
}

    to

    Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(GetMaterialApp(
theme: ThemeData(
         primarySwatch: Colors.amber,
         buttonTheme: ButtonTheme.of(context).copyWith(
           textTheme: ButtonTextTheme.primary,
           shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(25.0)
           ),
         )
       ),
      home: const MyApp(),)
  );
}

    Do not use *GetMaterialApp(* in build use Scaffold

    Login or Signup to reply.
  4. 0

    You are using 2 material classes.

    -> MaterialApp

    -> GetMaterialApp

    Remove GetMaterialApp from main class

    runApp(const MyApp(),);

    And replace MaterialApp to GetMaterialApp in MyApp widget

    @override
Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter app',
      theme: ThemeData(
          primarySwatch: Colors.amber,
          buttonTheme: ButtonTheme.of(context).copyWith(
            textTheme: ButtonTextTheme.primary,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)
            ),
          )
      ),
      home: const MyHomePage(),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search