Code Monkey home page Code Monkey logo

Comments (6)

allasca avatar allasca commented on September 26, 2024

I use this

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: MainController(),
        builder: (_) {
          return GetMaterialApp(
            title: "Lestaripedia",
            theme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.green,
                brightness: Brightness.light,
              ),
              useMaterial3: true,
            ),
            darkTheme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.green,
                brightness: Brightness.dark,
              ),
              useMaterial3: true,
            ),
            themeMode: _.isDarkMode.value ? ThemeMode.dark : ThemeMode.light,
            home: const LoginUi(),
          );
        });
  }
}

just need to call update()

from getx.

abetoluwani avatar abetoluwani commented on September 26, 2024

1. Create a Theme Folder

Create a folder named theme inside your lib directory.

2. Define Themes in Separate Files

Inside the theme folder, create a file app_theme.dart and define your themes there.

File: lib/theme/app_theme.dart

import 'package:flutter/material.dart';
import '../widgets/space.dart';
import 'colors.dart';

class AppTheme {
  static ThemeData get theme {
    return ThemeData(
      scaffoldBackgroundColor: AppColors.white,
      dialogBackgroundColor: AppColors.white,
      dialogTheme: const DialogTheme(
        backgroundColor: AppColors.white,
        surfaceTintColor: AppColors.white,
      ),
      primaryColor: AppColors.primary,
      cardColor: AppColors.white,
      appBarTheme: const AppBarTheme(
        backgroundColor: AppColors.white,
        iconTheme: IconThemeData(color: AppColors.black),
        surfaceTintColor: Colors.transparent,
      ),
      chipTheme: ChipThemeData(
        padding: simPad(5, 5),
        shape: const StadiumBorder(
          side: BorderSide.none,
        ),
        side: BorderSide.none,
      ),
      primaryColorLight: AppColors.white,
      popupMenuTheme: const PopupMenuThemeData(color: AppColors.white),
    );
  }

  static ThemeData get darkTheme {
    return ThemeData(
      scaffoldBackgroundColor: AppColors.black,
      dialogBackgroundColor: AppColors.grey900,
      dialogTheme: const DialogTheme(
        backgroundColor: AppColors.grey900,
        surfaceTintColor: AppColors.grey900,
      ),
      primaryColor: AppColors.primary,
      cardColor: AppColors.grey850,
      appBarTheme: const AppBarTheme(
        backgroundColor: AppColors.grey900,
        elevation: 0,
        surfaceTintColor: Colors.transparent,
        iconTheme: IconThemeData(color: AppColors.white),
      ),
      chipTheme: ChipThemeData(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      dividerColor: AppColors.grey200,
      primaryColorLight: AppColors.white,
      popupMenuTheme: const PopupMenuThemeData(color: AppColors.grey900),
    );
  }
}

3. Update Your Main App File

Modify your main.dart file to use the new theme setup.

File: lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'theme/app_theme.dart';
import 'routes/app_pages.dart'; // Ensure this is the correct path to your routes file
import 'bindings/splashscreen_binding.dart'; // Ensure this is the correct path to your binding file

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      splitScreenMode: false,
      builder: (_, child) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          initialRoute: AppPages.INITIAL,
          initialBinding: SplashscreenBinding(),
          getPages: AppPages.routes,
          darkTheme: AppTheme.darkTheme,
          theme: AppTheme.theme,
        );
      },
    );
  }
}

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

4. Define Colors

Ensure that you have a colors file where you define all your color constants.

File: lib/theme/colors.dart

import 'package:flutter/material.dart';

class AppColors {
  static const Color white = Colors.white;
  static const Color black = Colors.black;
  static const Color primary = Colors.blue; // Replace with your primary color
  static const Color grey200 = Color(0xFFEEEEEE);
  static const Color grey850 = Color(0xFF1C1C1C);
  static const Color grey900 = Color(0xFF121212);
}

5. Ensure simPad Utility

Ensure you have the simPad function or a similar utility for padding.

File: lib/widgets/space.dart

import 'package:flutter/material.dart';

// Assuming simPad is a predefined utility function
EdgeInsets simPad(double horizontal, double vertical) {
  return EdgeInsets.symmetric(horizontal: horizontal, vertical: vertical);
}

With these steps, your project will have a well-structured theme folder, allowing you to manage light and dark themes effectively. The predefined simPad and AppColors are utilized as expected but are not necessary

from getx.

abetoluwani avatar abetoluwani commented on September 26, 2024

@allasca @jasonlaw @BppleMan @lsm i thinkthis should solve it

from getx.

BppleMan avatar BppleMan commented on September 26, 2024

I use this

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: MainController(),
        builder: (_) {
          return GetMaterialApp(
            title: "Lestaripedia",
            theme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.green,
                brightness: Brightness.light,
              ),
              useMaterial3: true,
            ),
            darkTheme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.green,
                brightness: Brightness.dark,
              ),
              useMaterial3: true,
            ),
            themeMode: _.isDarkMode.value ? ThemeMode.dark : ThemeMode.light,
            home: const LoginUi(),
          );
        });
  }
}

just need to call update()

I prefer this solution at the moment, because I have already reserved a series of ThemeData, I just want to simply replace the entire ThemeData, not the Color, in the app running.
thanks @abetoluwani

from getx.

abetoluwani avatar abetoluwani commented on September 26, 2024

Yeah i forgot to add @BppleMan

themeMode: ThemeMode.system,

this would automatically select the theme data for any theme data you create

from getx.

halloweens1 avatar halloweens1 commented on September 26, 2024

Ran into same issue, I've debugged that Get.changeTheme, which leads to GetMaterialController's method setTheme, I found out that darkTheme's value will be always null, cuz I couldn't find where sets its value, I did double check it, turned out the same result, I don't know whether I'm right or not, I highly suspect that if statement about darkTheme == null is the reason for having no effect after applying Get.changeTheme in dark mode, cuz it only changes the theme, not the darkTheme, due to the darkTheme's value is always null.

from getx.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.