Индивидуальный дизайн художника Flutter
2 ответа
Если вы хотите создать свою собственную форму, вы можете использовать https://fluttershapemaker.com/
Я сделал нечто подобное, но с 3 зонами. Этот виджет работает, вы можете настроить его как хотите:
Widget _getColumnColor(
{Color color1,
Color color2,
Color color3,
double radius,
Widget content1,
Widget content2,
Widget content3}) {
return Column(
children: [
Expanded(
flex: 2,
child: Stack(
children: [
Container(
color: color2,
),
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
color: color1,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(radius),
),
),
child: content1,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color1,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color2,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content2,
),
],
)),
Expanded(
flex: 1,
child: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
color: color2,
)),
Expanded(child: Container(color: color3))
],
),
Container(
decoration: BoxDecoration(
color: color3,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomRight: Radius.circular(radius),
),
),
width: double.infinity,
height: double.infinity,
child: content3,
),
],
)),
],
);
}
Color1, color2 и color3 - это цвета зон, radius - радиус углов, а content1, content2 и content3 - это содержимое внутри трех зон.