Skip to content

Commit

Permalink
style(Overall UI): Route change and UI Improvements
Browse files Browse the repository at this point in the history 
1. Changed UI and colors and fonts
2. Removed google fonts and dynamic colors
3. Moved settings page to bottom navigation
  • Loading branch information
@nafishahmeddev
nafishahmeddev committed May 14, 2024
1 parent 7e1dc18 commit 2683727
Show file tree
Hide file tree
Showing 11 changed files with 166 additions and 282 deletions.
67 changes: 22 additions & 45 deletions lib/app.dart
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,42 @@
import 'package:dynamic_color/dynamic_color.dart';
import 'package:fintracker/bloc/cubit/app_cubit.dart';
import 'package:fintracker/screens/main.screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:month_year_picker/month_year_picker.dart';

class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: isDarkMode? Brightness.light: Brightness.dark
statusBarIconBrightness: MediaQuery.of(context).platformBrightness
));

return BlocBuilder<AppCubit, AppState>(
builder: (context, state){
return DynamicColorBuilder(
builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
ColorScheme scheme = ColorScheme.fromSeed(seedColor: Color(state.themeColor), brightness: MediaQuery.of(context).platformBrightness);

if (isDarkMode && darkDynamic != null) {
scheme = darkDynamic.harmonized();
}
if (!isDarkMode && lightDynamic != null) {
scheme = lightDynamic.harmonized();
}


return MaterialApp(
title: 'Fintracker',
theme: ThemeData(
colorScheme: scheme,
useMaterial3: true,
brightness: MediaQuery.of(context).platformBrightness,
textTheme: GoogleFonts.rubikTextTheme(
isDarkMode? ThemeData.dark().textTheme: ThemeData.light().textTheme,
),
navigationBarTheme: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith((Set<MaterialState> states){
TextStyle style = TextStyle(fontWeight: FontWeight.w500, fontSize: 12, fontFamily: GoogleFonts.rubik().fontFamily);
if(states.contains(MaterialState.selected)){
style = style.merge(const TextStyle(fontWeight: FontWeight.w600));
}
return style;
}),
)
),
home: const MainScreen(),
localizationsDelegates: const [
GlobalWidgetsLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
MonthYearPickerLocalizations.delegate,
],
debugShowCheckedModeBanner: false,
);
}
return MaterialApp(
title: 'Fintracker',
theme: ThemeData(
useMaterial3: true,
brightness: MediaQuery.of(context).platformBrightness,
navigationBarTheme: NavigationBarThemeData(
labelTextStyle: MaterialStateProperty.resolveWith((Set<MaterialState> states){
TextStyle style = const TextStyle(fontWeight: FontWeight.w500, fontSize: 11);
if(states.contains(MaterialState.selected)){
style = style.merge(const TextStyle(fontWeight: FontWeight.w600));
}
return style;
}),
)
),
home: const MainScreen(),
localizationsDelegates: const [
GlobalWidgetsLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
MonthYearPickerLocalizations.delegate,
],
);
}
);
Expand Down
7 changes: 3 additions & 4 deletions lib/screens/accounts/accounts.screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import 'package:fintracker/widgets/currency.dart';
import 'package:fintracker/widgets/dialog/account_form.dialog.dart';
import 'package:fintracker/widgets/dialog/confirm.modal.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

maskAccount(String value, [int lastLength = 4]){
if(value.length <4 ) return value;
Expand Down Expand Up @@ -104,7 +103,7 @@ class _AccountsScreenState extends State<AccountsScreen> {
]
)
),
CurrencyText(account.balance??0, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700, fontFamily: GoogleFonts.jetBrainsMono().fontFamily),),
CurrencyText(account.balance??0, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w700),),
const SizedBox(height: 10,),
Row(
children: [
Expand All @@ -120,7 +119,7 @@ class _AccountsScreenState extends State<AccountsScreen> {
]
)
),
CurrencyText(account.income??0, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.success, fontFamily: GoogleFonts.jetBrainsMono().fontFamily),)
CurrencyText(account.income??0, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.success),)
],
)
),
Expand All @@ -136,7 +135,7 @@ class _AccountsScreenState extends State<AccountsScreen> {
]
)
),
CurrencyText(account.expense??0, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.error, fontFamily: GoogleFonts.jetBrainsMono().fontFamily),)
CurrencyText(account.expense??0, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.error),)

],
)
Expand Down
12 changes: 3 additions & 9 deletions lib/screens/home/home.screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import 'package:fintracker/theme/colors.dart';
import 'package:fintracker/widgets/currency.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';


Expand Down Expand Up @@ -153,12 +152,7 @@ class _HomeScreenState extends State<HomeScreen> {
],
),
),
SizedBox(
height: 190,
width: double.infinity,
child: AccountsSlider(accounts: _accounts,),
),

AccountsSlider(accounts: _accounts,),
const SizedBox(height: 15,),
Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
Expand Down Expand Up @@ -210,7 +204,7 @@ class _HomeScreenState extends State<HomeScreen> {
)
),
const SizedBox(height: 5,),
CurrencyText(_income, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.success, fontFamily: GoogleFonts.jetBrainsMono().fontFamily),)
CurrencyText(_income, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.success),)
],
),
)
Expand Down Expand Up @@ -238,7 +232,7 @@ class _HomeScreenState extends State<HomeScreen> {
)
),
const SizedBox(height: 5,),
CurrencyText(_expense, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.error, fontFamily: GoogleFonts.jetBrainsMono().fontFamily),)
CurrencyText(_expense, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: ThemeColors.error),)
],
),
)
Expand Down
9 changes: 4 additions & 5 deletions lib/screens/home/widgets/account_slider.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:fintracker/model/account.model.dart';
import 'package:fintracker/widgets/currency.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AccountsSlider extends StatefulWidget{
final List<Account> accounts;
Expand Down Expand Up @@ -58,8 +57,8 @@ class _AccountSlider extends State<AccountsSlider>{
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CurrencyText(account.balance ?? 0, style: Theme.of(context).textTheme.headlineMedium?.merge(
TextStyle(
color: Colors.white, fontFamily: GoogleFonts.jetBrainsMono().fontFamily,
const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700
),
)),
Expand Down Expand Up @@ -89,8 +88,8 @@ class _AccountSlider extends State<AccountsSlider>{
},
),
),
const SizedBox(height: 10,),
SizedBox(
if(widget.accounts.length > 1) const SizedBox(height: 10,),
if(widget.accounts.length > 1) SizedBox(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
Expand Down
3 changes: 1 addition & 2 deletions lib/screens/home/widgets/payment_list_item.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import 'package:fintracker/model/payment.model.dart';
import 'package:fintracker/widgets/currency.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';
import '../../../theme/colors.dart';

Expand Down Expand Up @@ -36,7 +35,7 @@ class PaymentListItem extends StatelessWidget{
),
trailing: CurrencyText(
isCredit? payment.amount : -payment.amount,
style: Theme.of(context).textTheme.bodyMedium?.apply(color: isCredit? ThemeColors.success:ThemeColors.error, fontFamily: GoogleFonts.manrope().fontFamily)
style: Theme.of(context).textTheme.bodyMedium?.apply(color: isCredit? ThemeColors.success:ThemeColors.error)
),
) ;
}
Expand Down
17 changes: 7 additions & 10 deletions lib/screens/main.screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'package:fintracker/screens/onboard/onboard_screen.dart';
import 'package:fintracker/screens/settings/settings.screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:material_symbols_icons/symbols.dart';

class MainScreen extends StatefulWidget{
const MainScreen({super.key});
Expand Down Expand Up @@ -36,7 +37,8 @@ class _MainScreenState extends State<MainScreen>{
children: const [
HomeScreen(),
AccountsScreen(),
CategoriesScreen()
CategoriesScreen(),
SettingsScreen()
],
onPageChanged: (int index){
setState(() {
Expand All @@ -47,18 +49,13 @@ class _MainScreenState extends State<MainScreen>{
bottomNavigationBar: NavigationBar(
selectedIndex: _selected,
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: "Home"),
NavigationDestination(icon: Icon(Icons.wallet), label: "Accounts"),
NavigationDestination(icon: Icon(Icons.category), label: "Categories"),
NavigationDestination(icon: Icon(Icons.settings), label: "Settings"),
NavigationDestination(icon: Icon(Symbols.home, fill: 1,), label: "Home"),
NavigationDestination(icon: Icon(Symbols.wallet, fill: 1,), label: "Accounts"),
NavigationDestination(icon: Icon(Symbols.category, fill: 1,), label: "Categories"),
NavigationDestination(icon: Icon(Symbols.settings, fill: 1,), label: "Settings"),
],
onDestinationSelected: (int selected){
if(selected < 3){
_controller.jumpToPage(selected);
}
if(selected == 3){
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>const SettingsScreen()));
}
},
),
);
Expand Down
4 changes: 1 addition & 3 deletions lib/screens/payment_form.screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import 'package:fintracker/widgets/buttons/button.dart';
import 'package:fintracker/widgets/dialog/confirm.modal.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:intl/intl.dart';

typedef OnCloseCallback = Function(Payment payment);
Expand Down Expand Up @@ -292,11 +291,10 @@ class _PaymentForm extends State<PaymentForm>{
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,4}')),
],
style: GoogleFonts.manrope(),
decoration: InputDecoration(
filled: true,
hintText: "0.0",
prefixIcon: Padding(padding: const EdgeInsets.only(left: 15), child: CurrencyText(null, style: GoogleFonts.jetBrainsMono())),
prefixIcon: Padding(padding: const EdgeInsets.only(left: 15), child: CurrencyText(null)),
prefixIconConstraints: const BoxConstraints(minWidth: 0, minHeight: 0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(15)),
contentPadding: const EdgeInsets.symmetric(vertical: 14, horizontal: 15)
Expand Down
Loading

0 comments on commit 2683727

Please sign in to comment.