DEV Community

niranjantk
niranjantk

Posted on

Things that i need to do in order to make a good project (Flutter)

#flutter

The thing that I need to do in order to setup the flutter project for all the project

  1. First the Logs in the Terminal to be good 
void logInfo(String message) {
  debugPrint('\x1B[32m$message\x1B[0m');
  // green
}

void logWarning(String message) {
  debugPrint('\x1B[33m$message\x1B[0m');
  // yellow
}

void logError(String message) {
  debugPrint('\x1B[31m$message\x1B[0m');
  // red
}
Enter fullscreen mode Exit fullscreen mode
  1. The Custom Error Page In The Main 
ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
    return FriendlyErrorPage(errorDetails: errorDetails);
  };
Enter fullscreen mode Exit fullscreen mode
  1. For the provider To make Separate page for the provider list 
runApp(
    MultiProvider(
      providers: AllTheProviders().multipleProviderList,

      child: const MyApp(),
Enter fullscreen mode Exit fullscreen mode

And the provider list

class AllTheProviders {

  List<SingleChildWidget> multipleProviderList = [
    //Auth
    ChangeNotifierProvider(create: (_)=>LoginProvider(apiService: apiService)),


  ];
}
Enter fullscreen mode Exit fullscreen mode
  1. For the theme

To give to the system theme

 themeMode: ThemeMode.system,
Enter fullscreen mode Exit fullscreen mode

for the custom theme

 theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
Enter fullscreen mode Exit fullscreen mode 

class AppTheme {
  // 🌞 LIGHT THEME
  static final ThemeData lightTheme = ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,

    // Color scheme built from your light colors
    colorScheme: const ColorScheme.light(
      primary: AppColorLight.buttonColorL,
      secondary: AppColorLight.boldIconBluebackD,
      surface: AppColorLight.appBackgroundL,
      background: AppColorLight.appBackgroundL,
      onPrimary: AppColorLight.textColorL,
      onSecondary: AppC
Enter fullscreen mode Exit fullscreen mode 

  // 🌚 DARK THEME
  static final ThemeData darkTheme = ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,

    colorScheme: const ColorScheme.dark(
      primary: AppColorsDark.buttonColorD,
      secondary: AppColorsDark.boldIconBluebackD,
      surface: AppColorsDark.appBackgroundD,
      background: AppColorsDark.appBackgroundD,
      onPrimary: AppColorsDark.textColorD,
      onSecondary: AppColorsDark.textColorD,
      onSurface: Colors.white,
      onBackground: Colors.white,
Enter fullscreen mode Exit fullscreen mode
  1. for the Named routes for the page navigation 
 initialRoute: AppRoutes.splash,
      routes: AppRoutes.routes,
Enter fullscreen mode Exit fullscreen mode 

class AppRoutes {
  static const String splash = "/Splash";
  static const String introCardscreen = "/IntroCardScreen";
  static const String introCard1 = "/IntroCard1";
  static const String introCard2 = "/IntroCard2";
  static const String introCard3 = "/IntroCard3";
  static const String welcomeScreen = "/WelcomeScreen";

  //authentication
  static const String loginScreen = "/LoginScreen";
  static const String createAccountScreen = "/CreateAccount";
  static const String forgotPassowrd = "/ForgotPassword";

  //home screen
  static const String navigation = '/Navigation';
  static const String homePage = '/HomePage';
  static const String calenderPage = '/CalenderPage';
  static const String focuosPage = "/FocuosePage";
  static const String profilePage = "/ProfilePage";

  static Map<String, WidgetBuilder> routes = {
    splash: (context) => SplashScreen(),
    introCardscreen: (context) => IntroCardsScreen(),
    introCard1: (context) => ManageTaskCard(),
    introCard2: (context) => CreateDailyRonineCard(),
    introCard3: (context) => OrganizeTaskCart(),
    welcomeScreen: (context) => WelcomeScreen(),

    //authentication
    loginScreen: (context) => LoginScreen(),
    createAccountScreen: (context) => RegisterScreen(),
    forgotPassowrd: (context) => ForgotPasswordScreen(),

    //home
    navigation: (context) => RoutesPage(),
    homePage: (context) => HomeScreen(),
    calenderPage: (context) => CalendarScreen(),
    focuosPage: (context) => FocuseScreen(),
    profilePage:(context)=>ProfileScreen()
  };
}
Enter fullscreen mode Exit fullscreen mode
  1. For the image 
class NamedImage {
  static const String appLogo = "assets/Vector.svg";
  static const String onBordSlide1 = "assets/Group182.svg";
  static const String onBordSlide2 = "assets/Frame162.svg";
  static const String onBordSlide3 = "assets/Frame161.svg";
  static const String googleIcon = "assets/google.svg";
  static const String appleIcon = "assets/apple.svg";
}
Enter fullscreen mode Exit fullscreen mode
  1. For the custom Color 

class AppColorsDark {
  static const Color appBackgroundD = Colors.black;
  static const Color textColorD = Color(0xffFFFFFF);
  static const Color buttonColorD = Color(0xff8875FF);
  static const Color textColorDimD = Color.fromARGB(103, 0, 0, 0);
  static const Color containerColor = Color(0xff4C4C4C);
  //icon dark
  static const Color boldIconBlueD = Color(0xff0055A3);
  static const Color boldIconBluebackD = Color(0xff809CFF);
  static const Color boldIconRedD = Color(0xffA30000);
  static const Color boldIconRedBackD = Color(0xffFF8080);
  static const Color boldIconYelloBack = Color(0xffFFCC80);
  static const Color boldIconYelloD = Color(0xffA36200);
}
Enter fullscreen mode Exit fullscreen mode
  1. for the custom text that with the build in function 

class Heading1 extends StatelessWidget {
  final String label;
  const Heading1({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return Text(label, style: Theme.of(context).textTheme.displayLarge);
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. for the flavors for the project

folder structure

└── 📁flavors
    └── 📁flags
        ├── fitnest_dep.dart
        ├── fitnest_dev.dart
        ├── fitnest_pro.dart
    └── 📁main
        ├── main_fitness_tracker.dart
        ├── main_health_tracker.dart
        ├── main_mind_tracker.dart
    ├── config_manager.dart
    └── config.dart
Enter fullscreen mode Exit fullscreen mode

In the config manager


import 'config.dart';

class ConfigManager {
  ConfigManager._privateConstructor();

  static final ConfigManager _instance = ConfigManager._privateConstructor();

  factory ConfigManager() {
    return _instance;
  }

  late Config _config;

  void initialize(String environment) {
    _config = Config.fromEnvironment(environment);
  }

  Config get config => _config;
}
Enter fullscreen mode Exit fullscreen mode

and the config dart

// config.dart

abstract class Config {
  String get apiBaseUrl;
  String get appName;

  factory Config.fromEnvironment(String env) {
    switch (env) {
      case 'production':
        return ProductionConfig();
      case 'staging':
        return StagingConfig();
      case 'development':
      default:
        return DevelopmentConfig();
    }
  }
}

class ProductionConfig implements Config {
  @override
  String get apiBaseUrl => '';

  @override
  String get appName => 'MyApp';

  // Add other production-specific configs here
}

class StagingConfig implements Config {
  @override
  String get apiBaseUrl => '';

  @override
  String get appName => 'MyApp Staging';

  // Add other staging-specific configs here
}

class DevelopmentConfig implements Config {
  @override
  String get apiBaseUrl => '';

  @override
  String get appName => 'MyApp Dev';

  // Add other development-specific configs here
}
Enter fullscreen mode Exit fullscreen mode
  1. and last i think for the all the string to the a common file

Top comments (0)