Custom card or container with border, shape and three parts - flutter

Question

How can i create following flutter widget.
I want to use it in a column to navigate to the next page.
I've already tried a card or a container consisting of a row with three expandables. But either the red area with the icon overlaps the container with the rounded edges, or it is smaller than the container. What can I do or maybe someone has a code example?

Answer 1

You could create your own custom widget.
Here's a code sample you could use:
class MyWidget extends StatelessWidget {
final double height;
final Function onTap;
MyWidget({this.height = 40.0, this.onTap});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => onTap(),
child: Container(
decoration: BoxDecoration(
color: Colors.red,
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(8),
child: Icon(Icons.inbox, color: Colors.white),
),
Expanded(
child: Container(
padding: const EdgeInsets.only(left: 8),
alignment: Alignment.centerLeft,
height: height,
decoration: BoxDecoration(color: Colors.white),
child: Text(
'ARCHIV',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.horizontal(right: Radius.circular(10)),
),
height: height,
child: Icon(Icons.arrow_forward_ios, color: Colors.red),
),
],
),
),
);
}
}
Try full code on DartPad
Result: