Flutter, Theme is ignored when i imported from files

Question

i'm new to flutter, i learn from this tutorial to setup a theme

i successfully to create a light and dark theme when i code the theme directly inside the main.dart, but when i code the theme inside the lib/src/utils/theme/theme.dart and then imported it in main.dart, it doesnt work i also created a variable string "test" to see if i can print it in main.dart and it printed sucesfully.

here is my main.dart

import 'package:flutter/material.dart';
import 'package:login_app/src/utils/theme/theme.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // print(FGAppTheme.lightTheme);
    // print(FGAppTheme.tes);
    return MaterialApp(
      theme: FGAppTheme.lightTheme,
      darkTheme: FGAppTheme.darkTheme,
      themeMode: ThemeMode.system,

      // if i code the theme directly it works
      // theme: ThemeData(
      //   colorScheme: ColorScheme.fromSeed(
      //       brightness: Brightness.light,
      //       seedColor: Colors.yellow)),
      // darkTheme: ThemeData(
      //   colorScheme: ColorScheme.fromSeed(
      //       brightness: Brightness.dark,
      //       seedColor: Colors.blue)),
      
      home: const AppHome()
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text(".appable/"),leading: const Icon(Icons.ondemand_video)),
      floatingActionButton: FloatingActionButton(child: const Icon(Icons.add_shopping_cart_outlined), onPressed:(){}),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: ListView(
          children: [
            Text("Heading", style: Theme.of(context).textTheme.headlineMedium),
            Text("Sub-heading", style: Theme.of(context).textTheme.titleSmall),
            Text("paragraph", style: Theme.of(context).textTheme.bodyLarge),
            ElevatedButton(onPressed: () {}, child: const Text("Elevated Button"),),
            OutlinedButton(onPressed: () {}, child: const Text("Outlined Button"),),
            const Padding( padding: EdgeInsets.all(20.0), child: Image(image: AssetImage("assets/images/fish.jpeg")),),

          ],
        )
      )

    );
  }
}

and here is my theme.dart

import 'package:flutter/material.dart';

class FGAppTheme{
  FGAppTheme._();

  
  static ThemeData lightTheme = ThemeData(
    colorScheme: ColorScheme.fromSeed(
        brightness: Brightness.light,
        seedColor: Colors.yellow));
  static ThemeData darkTheme = ThemeData(
    colorScheme: ColorScheme.fromSeed(
        brightness: Brightness.dark,
        seedColor: Colors.blue));

  static String test = "abc";

}

here's the result when i code the theme directly inside the main.dart (https://i.sstatic.net/UEvdu.png)(https://i.sstatic.net/A6J41.png)

and this when code the theme inside theme.dart (https://i.sstatic.net/W6LhH.png)(https://i.sstatic.net/bJpOJ.png)

Answer 1

theme worked after i stopped and rerun the program .