Flutter - создание виджета "Контейнер" со специальным стилем, который "проецирует" дочерний контент.

Я хочу создать собственный виджет контейнера, который всегда имеет градиентный фон. Причина в том, чтобы закодировать градиент только в одном месте, чтобы его можно было изменить в одном месте и при этом повлиять на все приложение.

Я имею в виду следующее:

child: Container(
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [
            initialGradientColor,
            Theme.of(context).colorScheme.primary
          ],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [...more code...

Могу ли я извлечь такой виджет в контейнер?:

class GradientContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: // ****************** project content into here... ****************
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [initialGradientColor, Theme.of(context).colorScheme.primary],
        ),
      ),
    );
  }
}

Мне нужно было бы найти способ добавить ребенка в GradientContainerWidget. Есть ли способ проецировать контент на дочерний элемент виджета?

Использование в представлении будет примерно таким:

child: GradientContainerWidget(
                child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [..... more children....])
            );

1 ответ

Решение

Если вы ищете, как добавить ребенка, вы можете создать конструктор и передать его как Widget.

class GradientContainerWidget extends StatelessWidget {

  final Widget child;

  GradientContainerWidget({this.child}); //you can pass key to

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child
      height: double.infinity,
      width: double.infinity,
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: const Alignment(1, -1.0),
          end: const Alignment(-0.3, 0.0),
          colors: [initialGradientColor, Theme.of(context).colorScheme.primary],
        ),
      ),
    );
  }
}
Другие вопросы по тегам