Flutter. Темы и Стили. Подскажите правильные подходы работы со стилями?

Question

Всем привет! Пытаюсь выработать подход к работе со стилями во Flutter приложении. Раздражает, например, стилизация во View компонента. Делает его плохо читаемым. Я понимаю, что в компаниях все разрабатывает дизайнер. Но все же интересно, какие подходы используете вы?

Цвета приложения генерируете из ColorScheme.fromSeed, переопределяете все цвета или переопределяете стили виджетов глобально типа AppBar?
Как работаете с виджетами с индивидуальным дизайном, а именно где держите их стили? Выносите слили отдельно или храните в компоненте и как именно? Может выносите в extentions в тему? Если выносите, то все стили, или только цвета, градиенты и текстовые стили?

Можете расскажите о своих подходах к работе со стилями, которые позволяют делать код более поддерживаемым и расширяемым?

Answer 1

Могу отметить для себя важность и удобство:

создания мультиязычности (искать flutter_localizations, l10n)

создания класса для цветов приложения (хранить можно в lib/ui/theme/colors.dart)

class AppColors {

 static const Color white = Color.fromRGBO(255, 255, 255, 1);
 static const Color black = Color.fromRGBO(29, 29, 33, 1);

}

создания темы приложения, которая включает lightTheme, darkTheme (хранить можно в lib/ui/theme/theme.dart)

final ThemeData lightTheme = ThemeData(
 brightness: Brightness.light,
 primaryColor: AppColors.primaryColor,
 shadowColor: AppColors.primaryColor.withOpacity(0.17),
 dividerColor: AppColors.dividerColor,
 hintColor: AppColors.hintColor,
 errorColor: AppColors.errorColor,
 dialogBackgroundColor: Colors.white,
 disabledColor: AppColors.disabledColor,
 buttonTheme: buttonTheme,
 inputDecorationTheme: inputDecorationTheme,
 textTheme: textTheme,
 fontFamily: 'Montserrat');



final TextTheme textTheme = TextTheme(
 headline1: const TextStyle(
  fontFamily: 'Poppins',
  color: Colors.black,
  fontWeight: FontWeight.bold,
  fontSize: 24,
 ),
 headline2: const TextStyle(
  fontFamily: 'Poppins',
  color: Colors.black,
  fontWeight: FontWeight.bold,
  fontSize: 20,
 ),
);

// buttonTheme и inputDecorationTheme по такому же смыслу

Пример использования темы (также видно локализацию):

return MaterialApp(
          title: 'MyApp',
          theme: themeProvider.isDarkTheme ? darkTheme() : lightTheme(),
          supportedLocales: l10n.all,
           localizationsDelegates: const [
            AppLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
           ],
          initialRoute: RouteNames.splashScreen,
          routes: _router.routes,
        );

Касательно виджетов с индивидуальным дизайном, если верно понял, то вот пример хранения виджета (lib/ui/widgets/button.dart):

class AppButton extends StatelessWidget {
  final Widget? child;
  final void Function()? onPressed;
  final Color? color;

  const AppButton({Key? key, this.child, this.onPressed, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
              10),
        ),
        backgroundColor: color ?? Theme.of(context).primaryColor,
        minimumSize: const Size.fromHeight(50),
        shadowColor: AppColors.shadowColor,
      ),
      onPressed: onPressed,
      child: child,
    );
  }
}

БЛОГ НА HUSL

Flutter. Темы и Стили. Подскажите правильные подходы работы со стилями?

Ответы (1 шт):