Custom card layout on flutter

Question

I want to create a custom card layout or iPad and Tablets

Here's what I code so far

Widget _buildListItem(BuildContext context) {
return new Container(
    child: ListView(
  children: <Widget>[
    Card(
      elevation: 2,
      child: ClipPath(
        child: Container(
            height: 70,
            decoration: BoxDecoration(
                border: Border(
                    right:
                        BorderSide(color: Colors.lightGreen, width: 30))),
            child: Container(
              height: 70,
              child: Container(
                  alignment: Alignment(1.16, 0),
                  child: Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.black,
                    size: 24.0,
                    semanticLabel: 'wweqweqwe',
                  )),
            )),
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(3))),
      ),
    )
  ],
));

} }

I am new in the flutter please help me to build this.

Answer 1

Try this

Container(
                          height: 60,
                          width: MediaQuery.of(context).size.width,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15.0),
                              color: Colors.white),
                          child: Container(
                            child: Row(
                              children: <Widget>[
                                Container(
                                    height: 60,
                                    width: 50,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                          topLeft: Radius.circular(15),
                                          bottomLeft: Radius.circular(15),
                                        ),
                                        color: Colors.blue),
                                    child: Icon(
                                      Icons.arrow_forward_ios,
                                      color: Colors.black,
                                      size: 24.0,
                                      semanticLabel: 'wweqweqwe',
                                    )),
                                Expanded(
                                    child: Container(
                                      color: Colors.red,
                                      height: 60,
                                      padding: EdgeInsets.all(5.0),
                                      child: Row(
                                        mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                        mainAxisSize: MainAxisSize.min,
                                        crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                        children: <Widget>[
                                          Text('Text One'),
                                          Column(
                                            crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                            mainAxisSize: MainAxisSize.min,
                                            children: <Widget>[
                                              Text('Text Two'),
                                              Text('Text Three'),
                                            ],
                                          )
                                        ],
                                      ),
                                    )),
                                Container(
                                    height: 60,
                                    width: 30,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                          topRight: Radius.circular(15),
                                          bottomRight: Radius.circular(15),
                                        ),
                                        color: Colors.blue),
                                    child: Icon(
                                      Icons.arrow_forward_ios,
                                      color: Colors.black,
                                      size: 24.0,
                                      semanticLabel: 'wweqweqwe',
                                    )),
                              ],
                            ),
                          ))

OUTPUT