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],
),
),
);
}
}