Flutter Theming and Styling |

\\n\\n

This section introduces Flutter theme configuration, including Material Design themes, custom themes, and dark mode.

\\n\\n

---

\\n\\n

ThemeData - Application Theme

\\n\\n

Use ThemeData to uniformly configure the app’s theme colors, fonts, styles, etc.

\\n\\n

Example: Configuring Application Theme

\\n\\n

void main() {\\n\\n  runApp(\\n\\n    MaterialApp(\\n\\n      theme: ThemeData(\\n\\n        // Primary Color\\n\\n        colorScheme: ColorScheme.fromSeed(\\n\\n          seedColor: Colors.blue,\\n\\n          brightness: Brightness.light,\\n\\n        ),\\n\\n        // Use Material 3\\n\\n        useMaterial3:true,\\n\\n        // Font\\n\\n        fontFamily:'Roboto',\\n\\n        // AppBar Theme\\n\\n        appBarTheme:const AppBarTheme(\\n\\n          centerTitle:true,\\n\\n          elevation:0,\\n\\n        ),\\n\\n        // Button Theme\\n\\n        elevatedButtonTheme: ElevatedButtonThemeData(\\n\\n          style: ElevatedButton.styleFrom(\\n\\n            padding:const EdgeInsets.symmetric(horizontal:24, vertical:12),\\n\\n          ),\\n\\n        ),\\n\\n        // TextField Theme\\n\\n        inputDecorationTheme: InputDecorationTheme(\\n\\n          border: OutlineInputBorder(\\n\\n            borderRadius: BorderRadius.circular(8),\\n\\n          ),\\n\\n          filled:true,\\n\\n        ),\\n\\n      ),\\n\\n      home:const MyHomePage(),\\n\\n    ),\\n\\n  );\\n\\n}\\n

\\n\\n

---

\\n\\n

Theme.of - Using the Theme

\\n\\n

Use Theme.of(context) in a Widget to retrieve the current theme.

\\n\\n

Example: Using Theme Colors

\\n\\n

class ThemedButton extends StatelessWidget {\\n\\n  const ThemedButton({super.key});\\n\\n  @override\\n\\n  Widget build(BuildContext context){\\n\\n    // Get Theme\\n\\n    final theme = Theme.of(context);\\n\\n    return Column(\\n\\n      children:[\\n\\n        // Use Theme Color\\n\\n        Container(\\n\\n          color: theme.colorScheme.primary,\\n\\n          padding:const EdgeInsets.all(16),\\n\\n          child: Text(\\n\\n            'Primary Color',\\n\\n            style: TextStyle(color: theme.colorScheme.onPrimary),\\n\\n          ),\\n\\n        ),\\n\\n        const SizedBox(height:16),\\n\\n        // Use Secondary Color\\n\\n        Container(\\n\\n          color: theme.colorScheme.secondary,\\n\\n          padding:const EdgeInsets.all(16),\\n\\n          child: Text(\\n\\n            'Secondary Color',\\n\\n            style: TextStyle(color: theme.colorScheme.onSecondary),\\n\\n          ),\\n\\n        ),\\n\\n        const SizedBox(height:16),\\n\\n        // Use Error Color\\n\\n        Container(\\n\\n          color: theme.colorScheme.error,\\n\\n          padding:const EdgeInsets.all(16),\\n\\n          child: Text(\\n\\n            'Error Color',\\n\\n            style: TextStyle(color: theme.colorScheme.onError),\\n\\n          ),\\n\\n        ),\\n\\n      ],\\n\\n    );\\n\\n  }\\n\\n}\\n

\\n\\n

---

\\n\\n

Dark Mode

\\n\\n

Example: Supporting Dark Mode

\\n\\n

void main() {\\n\\n  runApp(\\n\\n    MaterialApp(\\n\\n      theme: ThemeData(\\n\\n        // Light Theme\\n\\n        brightness: Brightness.light,\\n\\n        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),\\n\\n      ),\\n\\n      darkTheme: ThemeData(\\n\\n        // Dark Theme\\n\\n        brightness: Brightness.dark,\\n\\n        colorScheme: ColorScheme.fromSeed(\\n\\n          seedColor: Colors.blue,\\n\\n          brightness: Brightness.dark,\\n\\n        ),\\n\\n      ),\\n\\n      // Enable Both (Optional)\\n\\n      themeMode: ThemeMode.system,// Based on System Settings\\n\\n      // themeMode: ThemeMode.light  // Force Light Theme\\n\\n      // themeMode: ThemeMode.dark // Force Dark Theme\\n\\n      home:const ThemeTogglePage(),\\n\\n    ),\\n\\n  );\\n}\\n

\\n\\n

// Toggle Theme\\n\\nclass ThemeTogglePage extends StatelessWidget {\\n\\n  const ThemeTogglePage({super.key});\\n\\n  @override\\n\\n  Widget build(BuildContext context){\\n\\n    return Scaffold(\\n\\n      appBar: AppBar(title:const Text('Theme Toggle')),\\n\\n      body: Center(\\n\\n        child: Column(\\n\\n          mainAxisAlignment: MainAxisAlignment.center,\\n\\n          children:[\\n\\n            const Text('Current Theme'),\\n\\n            const SizedBox(height:20),\\n\\n            // Toggle ThemeButton\\n\\n            ElevatedButton(\\n\\n              onPressed:(){\\n\\n                final currentMode = Theme.of(context).brightness;\\n\\n                if(currentMode == Brightness.light){\\n\\n                  // Switch to Dark Theme\\n\\n                  Theme.of(context).setThemeMode(ThemeMode.dark);\\n\\n                }else{\\n\\n                  // Switch to Light Theme\\n\\n                  Theme.of(context).setThemeMode(ThemeMode.light);\\n\\n                }\\n\\n              },\\n\\n              child:const Text('Toggle Theme'),\\n\\n            ),\\n\\n          ],\\n\\n        ),\\n\\n      ),\\n\\n    );\\n\\n  }\\n\\n}\\n

\\n\\n

---

\\n\\n

Custom Style Extensions

\\n\\n

Example: Custom TextTheme

\\n\\n

ThemeData(\\n\\n  textTheme:const TextTheme(\\n\\n    // Display Text (Large Title)\\n\\n    displayLarge: TextStyle(fontSize:57, fontWeight: FontWeight.w400),\\n\\n    displayMedium: TextStyle(fontSize:45, fontWeight: FontWeight.w400),\\n\\n    displaySmall: TextStyle(fontSize:36, fontWeight: FontWeight.w400),\\n\\n    // Title Text\\n\\n    headlineLarge: TextStyle(fontSize:32, fontWeight: FontWeight.w400),\\n\\n    headlineMedium: TextStyle(fontSize:28, fontWeight: FontWeight.w400),\\n\\n    headlineSmall: TextStyle(fontSize:24, fontWeight: FontWeight.w400),\\n\\n    // Title Text\\n\\n    titleLarge: TextStyle(fontSize:22, fontWeight: FontWeight.w500),\\n\\n    titleMedium: TextStyle(fontSize:16, fontWeight: FontWeight.w500),\\n\\n    titleSmall: TextStyle(fontSize:14, fontWeight: FontWeight.w500),\\n\\n    // Body Text\\n\\n    bodyLarge: TextStyle(fontSize:16, fontWeight: FontWeight.w400),\\n\\n    bodyMedium: TextStyle(fontSize:14, fontWeight: FontWeight.w400),\\n\\n    bodySmall: TextStyle(fontSize:12, fontWeight: FontWeight.w400),\\n\\n    // Label Text\\n\\n    labelLarge: TextStyle(fontSize:14, fontWeight: FontWeight.w500),\\n\\n    labelMedium: TextStyle(fontSize:12, fontWeight: FontWeight.w500),\\n\\n    labelSmall: TextStyle(fontSize:11, fontWeight: FontWeight.w500),\\n\\n  ),\\n\\n)\\n

\\n\\n

\\n

Using ThemeData to centrally manage app styles makes theme switching and style consistency easy, and maintenance more convenient.

\\n