darkTheme property
-------------------------- Dark Theme -------------------------------------------- ///
Implementation
static ThemeData darkTheme = ThemeData(
/// Brightness
brightness: Brightness.dark,
/// Primary Color
primaryColor: Color(0xff069DEF),
/// Scaffold and Background color
scaffoldBackgroundColor: Color(0xff161616),
canvasColor: Colors.transparent,
/// AppBar Theme
appBarTheme: AppBarTheme(backgroundColor: Color(0xff161616)),
/// Card Theme
cardTheme: CardTheme(color: Color(0xff222327)),
cardColor: Color(0xff222327),
/// Input (Text-Field) Theme
inputDecorationTheme: InputDecorationTheme(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1, color: Color(0xff069DEF)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1, color: Colors.white70),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1, color: Colors.white70)),
),
/// Divider Color
dividerTheme: DividerThemeData(color: Color(0xff363636), thickness: 1),
dividerColor: Color(0xff363636),
/// Floating Action Theme
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff069DEF),
splashColor: Colors.white.withAlpha(100),
highlightElevation: 8,
elevation: 4,
focusColor: Color(0xff069DEF),
hoverColor: Color(0xff069DEF),
foregroundColor: Colors.white),
/// Bottom AppBar Theme
bottomAppBarTheme:
BottomAppBarTheme(color: Color(0xff464c52), elevation: 2),
/// Tab bar Theme
tabBarTheme: TabBarTheme(
unselectedLabelColor: Color(0xff495057),
labelColor: Color(0xff069DEF),
indicatorSize: TabBarIndicatorSize.label,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Color(0xff069DEF), width: 2.0),
),
),
///Switch Theme
switchTheme: SwitchThemeData(
trackColor: MaterialStateProperty.resolveWith((state) {
const Set<MaterialState> interactiveStates = <MaterialState>{
MaterialState.pressed,
MaterialState.hovered,
MaterialState.focused,
MaterialState.selected,
};
if (state.any(interactiveStates.contains)) {
return Color(0xffabb3ea);
}
return null;
}),
thumbColor: MaterialStateProperty.resolveWith((state) {
const Set<MaterialState> interactiveStates = <MaterialState>{
MaterialState.pressed,
MaterialState.hovered,
MaterialState.focused,
MaterialState.selected,
};
if (state.any(interactiveStates.contains)) {
return Color(0xff3C4EC5);
}
return null;
}),
),
/// Slider Theme
sliderTheme: SliderThemeData(
activeTrackColor: Color(0xff069DEF),
inactiveTrackColor: Color(0xff069DEF).withAlpha(100),
trackShape: RoundedRectSliderTrackShape(),
trackHeight: 4.0,
thumbColor: Color(0xff069DEF),
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
overlayShape: RoundSliderOverlayShape(overlayRadius: 24.0),
tickMarkShape: RoundSliderTickMarkShape(),
inactiveTickMarkColor: Colors.red[100],
valueIndicatorShape: PaddleSliderValueIndicatorShape(),
valueIndicatorTextStyle: TextStyle(
color: Colors.white,
),
),
///Other Color
indicatorColor: Colors.white,
disabledColor: Color(0xffa3a3a3),
highlightColor: Colors.white.withAlpha(28),
splashColor: Colors.white.withAlpha(56), colorScheme: ColorScheme.fromSeed(
seedColor: Color(0xff069DEF), brightness: Brightness.dark).copyWith(background: Color(0xff161616)).copyWith(error: Colors.orange),
);