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

How i can add our custome pallete / theme in flutter

I want to change the color of AppBar and use a custom color for it, I tried many options but none seem to work. Is there anything I’m missing?

import 'package:flutter/material.dart';

final ThemeData CompanyThemeData = new ThemeData(
  brightness: Brightness.light,
  primaryColorBrightness: Brightness.light,
  accentColor: CompanyColors.black[500],
  accentColorBrightness: Brightness.light
);
  
class CompanyColors {
  CompanyColors._(); // this basically makes it so you can instantiate this class
 
 static const _blackPrimaryValue = 0xFF000000;

  static const MaterialColor black = const MaterialColor(
    _blackPrimaryValue,
    const <int, Color>{
      50:  const Color(0xFFe0e0e0),
      100: const Color(0xFFb3b3b3),
      200: const Color(0xFF808080),
      300: const Color(0xFF4d4d4d),
      400: const Color(0xFF262626),
      500: const Color(_blackPrimaryValue),
      600: const Color(0xFF000000),
      700: const Color(0xFF000000),
      800: const Color(0xFF000000),
      900: const Color(0xFF000000),
    },
  );
}
Tags:

2

Answers


  1. 0

    Define Your theme in Material App

    MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'HCM Smiles',
            theme: CompanyThemeData,
            home: const SplashScreen())
    Login or Signup to reply.
  2. 0

    You can define Theme of your app using ThemeData in MaterialApp widget. In that way you can define global values for all TabTabs in you app to make it consistent across all screens

    class MyApp extends StatelessWidget {
  MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        tabBarTheme: TabBarTheme(
          labelColor: Colors.black,
          indicatorColor: kMainColor,
          labelStyle: const TextStyle(
              color: kFillColor, fontSize: 15, fontFamily: 'Roboto'),
        ),
        appBarTheme: const AppBarTheme(
            toolbarTextStyle: TextStyle(
                color: kFillColor, fontSize: 30, fontFamily: 'Roboto'),
            toolbarHeight: 70,
            shape: ContinuousRectangleBorder(
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(35),
                    bottomRight: Radius.circular(35))),
            backgroundColor: kMainColor,
            titleTextStyle: TextStyle(color: kAdditionalColor, fontSize: 25)),

        useMaterial3: true,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search