Perbarui tema dan styling dashboard dengan komponen kustom
- Tambahkan tema aplikasi di AppTheme - Ganti font default dengan DM Sans dari aset - Buat komponen kustom seperti StatisticCard, NavigationButton, dan StatusPill - Perbarui desain drawer, bottom navigation, dan elemen dashboard - Gunakan gradient dan warna tema yang konsisten - Sederhanakan struktur kode dan styling
This commit is contained in:
Khafidh Fuadi
190
lib/app/theme/app_theme.dart
Normal file
190
lib/app/theme/app_theme.dart
Normal file
@ -0,0 +1,190 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppTheme {
|
||||
// Warna utama aplikasi
|
||||
static const Color primaryColor = Color(0xFF2E5077);
|
||||
static const Color secondaryColor = Color(0xFF5882B1);
|
||||
static const Color accentColor = Color(0xFF4A6D8C);
|
||||
|
||||
// Warna untuk status
|
||||
static const Color verifiedColor = Color(0xFFACF1C8);
|
||||
static const Color processedColor = Color(0xFFF1C8AC);
|
||||
static const Color rejectedColor = Color(0xFFF1ACAC);
|
||||
static const Color scheduledColor = Color(0xFF2E5077);
|
||||
static const Color completedColor = Color(0xFF6750A4);
|
||||
|
||||
static const Color successColor = Colors.green;
|
||||
static const Color warningColor = Colors.orange;
|
||||
static const Color errorColor = Colors.red;
|
||||
static const Color infoColor = Colors.blue;
|
||||
|
||||
// Gradient utama aplikasi
|
||||
static const LinearGradient primaryGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF2E5077), Color(0xFF5882B1)],
|
||||
transform: GradientRotation(96.93 * 3.14159 / 180),
|
||||
);
|
||||
|
||||
// Tema terang
|
||||
static ThemeData lightTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
fontFamily: 'DMSans',
|
||||
|
||||
// Skema warna
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
primary: primaryColor,
|
||||
secondary: secondaryColor,
|
||||
),
|
||||
|
||||
// AppBar
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: primaryColor,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
iconTheme: IconThemeData(color: primaryColor),
|
||||
),
|
||||
|
||||
// Tombol
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
side: const BorderSide(color: primaryColor),
|
||||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Input
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: primaryColor, width: 2),
|
||||
),
|
||||
prefixIconColor: primaryColor,
|
||||
floatingLabelStyle: const TextStyle(color: primaryColor),
|
||||
),
|
||||
|
||||
// Card
|
||||
cardTheme: CardTheme(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
|
||||
// Drawer
|
||||
drawerTheme: const DrawerThemeData(
|
||||
backgroundColor: Colors.white,
|
||||
),
|
||||
|
||||
// Bottom Navigation Bar
|
||||
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
|
||||
backgroundColor: Colors.white,
|
||||
selectedItemColor: primaryColor,
|
||||
unselectedItemColor: Colors.grey,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: 8,
|
||||
),
|
||||
);
|
||||
|
||||
// Tema gelap (jika diperlukan)
|
||||
static ThemeData darkTheme = ThemeData(
|
||||
useMaterial3: true,
|
||||
fontFamily: 'DMSans',
|
||||
brightness: Brightness.dark,
|
||||
|
||||
// Skema warna
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
primary: primaryColor,
|
||||
secondary: secondaryColor,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
|
||||
// AppBar
|
||||
appBarTheme: const AppBarTheme(
|
||||
backgroundColor: Color(0xFF1E1E1E),
|
||||
foregroundColor: Colors.white,
|
||||
elevation: 0,
|
||||
centerTitle: true,
|
||||
iconTheme: IconThemeData(color: Colors.white),
|
||||
),
|
||||
|
||||
// Tombol
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: Colors.white,
|
||||
side: const BorderSide(color: Colors.white),
|
||||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Input
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: secondaryColor, width: 2),
|
||||
),
|
||||
prefixIconColor: secondaryColor,
|
||||
floatingLabelStyle: const TextStyle(color: secondaryColor),
|
||||
),
|
||||
|
||||
// Card
|
||||
cardTheme: CardTheme(
|
||||
elevation: 2,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
|
||||
// Drawer
|
||||
drawerTheme: const DrawerThemeData(
|
||||
backgroundColor: Color(0xFF1E1E1E),
|
||||
),
|
||||
|
||||
// Bottom Navigation Bar
|
||||
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
|
||||
backgroundColor: Color(0xFF1E1E1E),
|
||||
selectedItemColor: secondaryColor,
|
||||
unselectedItemColor: Colors.grey,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: 8,
|
||||
),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user