Как создать собственный файл темы для приложения Flutter

Question

Я ищу собственный шаблон цветовой темы во Flutter. Что-то вроде следующего написано вSwift.

struct Colors {
    struct Text {
        static var success: UIColor {
            return UIColor.green
        }
        static var error: UIColor {
            return UIColor.red
        }
    }

    struct Button {
        static var normal: UIColor {
            return UIColor.black
        }
        static var onPressed: UIColor {
            return UIColor.blue
        }
    }
}

Чтобы я мог использовать что-то вроде,

let successTextColor = Colors.Text.success
let normalButtonColor = Colors.Button.normal

> Основная цель:

Я ищу что-то подходящее или лучшее для проекта флаттера, приведенное выше только для справки.

Я попытался переопределить ThemeData но, насколько я понимаю, я могу только переопределить TextTheme и не может использовать любое настраиваемое значение, например errorText или successText, так далее.

Мне нужно что-то, что предоставит мне цветовую палитру (шрифты, размер и т. Д.) Для кнопок или других виджетов.

Также помните, что мне нужно поддерживать светлую и темную тему.

Любые предложения будут приняты во внимание.

Answer 1

Вот моя светлая тема, я переопределяю базовую, используя разные цвета для текста и т. Д., А внизу buttonTheme:

import 'package:flutter/material.dart';

ThemeData lightTheme() {
  TextTheme _basicTextTheme(TextTheme base) {
    return base.copyWith(
      headline1: base.headline1.copyWith(
        fontSize: 72.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Lato',
        color: Colors.white,
      ),
      headline6: base.headline6.copyWith(
        fontSize: 23.0,
        fontFamily: 'Lato',
      ),
      bodyText2: base.bodyText2.copyWith(
        fontSize: 16.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[300],
      ),
      headline4: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[600],
      ),
      headline5: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[50],
        //buttons
      ),
      caption: base.headline5.copyWith(
        fontSize: 12.0,
        fontFamily: 'Lato',
      ),
      bodyText1: base.bodyText1.copyWith(
        color: Colors.deepPurple[300],
        fontSize: 14,
      ),
    );
  }

  final ThemeData base = ThemeData.light();
  return base.copyWith(
      textTheme: _basicTextTheme(base.textTheme),
      primaryColor: Colors.deepPurple[300],
      accentColor: Colors.deepPurple[300],
      iconTheme: IconThemeData(
        color: Colors.deepPurple[300],
        size: 20.0,
      ),
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.deepPurple[300],
        shape: RoundedRectangleBorder(),
        textTheme: ButtonTextTheme.primary,
      ),
      sliderTheme: SliderThemeData(
        activeTrackColor: Colors.deepPurple[300],
        overlayColor: Colors.deepPurple[300].withAlpha(32),
        thumbColor: Colors.deepPurple[300],
      ),

}

Answer 2

Flutter - это все о виджетах. Итак, начните думать в этом аспекте и считайте, что приведенный выше текст и кнопки являются виджетами. Теперь вы можете создать их как повторно используемые виджеты в своем коде, чтобы их можно было создавать где угодно и, по сути, формировать вашу настраиваемую тему.

Например, создайте файл standardtext.dart и вставьте ниже

import 'package:flutter/material.dart';

class StandardText extends StatelessWidget {
  final String title;
  final Color normalColor;
  StandardText({this.title, this.normalColor})

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        title,
        style: TextStyle(
          color: normalColor,
        ),
      ),
    );
  }
}

затем во всем приложении используйте его, как показано ниже

StandardText(title: 'Text', normalColor: Colors.blue)

в деталях:

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: StandardText(title: 'Text', normalColor: Colors.blue),
    );
  }
}