How can i display different widgets in a list : Flutter

Question

I'm trying to recreate this ui template in which a I have list under that list is a list of items and after all the items is a container displaying a summary. I'm trying to achieve this by wrapping the listview.builder and a container inside a list view however it doesn't show anything. This is the code.

Container(
                      height: 550.0,
                      child: ListView(
                        children: <Widget>[
                          Expanded(
                            child:  ListView.builder(
                             physics: ClampingScrollPhysics(),
                             scrollDirection: Axis.vertical,
                             itemCount: itemList.length,
                             itemBuilder: (BuildContext context, int index) {
                              return SingleItem(
                                itemImage: itemList[index]['image'],
                                itemPrice: itemList[index]['price'],
                                itemName: itemList[index]['name'],
                                itemCode: itemList[index]['code'],
                              );
                            },
                           ),
                          ),
                          Expanded(
                            child: Container(
                              color: Colors.brown,
                            ),
                          )
                        ],
                      )
                    ),

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
          child: Column(
        children: [
          ListView.builder(
            shrinkWrap: true,
            itemCount: 10,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.all(20.0),
                margin: EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                    border: Border.all(width: 1, color: Colors.grey)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      color: Colors.blueAccent,
                    ),
                    SizedBox(
                      width: 30,
                    ),
                    Column(
                      children: [Text("Title"), Text('Tag'), Text('Price')],
                    )
                  ],
                ),
              );
            },
          ),
          Container(
            width: double.infinity,
            child: Card(
              color: Colors.redAccent,
              elevation: 1.0,
              child: (Column(children: [
                Text(
                  'Summary',
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Text("""
                This is the summary of your products
                """)
              ])),
            ),
          )
        ],
      )),
    );
  }
}

Try this out: https://codepen.io/theredcap/pen/qBbjLWp

Answer 2

You can look at this to give you an idea

return Column(
      children: [
        Expanded(
          child: ListView.builder(
              itemCount: 6,
              itemBuilder: (context, index) {
                return Container(
                  margin: EdgeInsets.all(16),
                  height: 170,
                  decoration: BoxDecoration(
                      color: Colors.grey[300],
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                            offset: Offset(0, 15),
                            blurRadius: 27,
                            color: Colors.black12)
                      ]),
                  child: Row(
                    children: [
                      Image.asset(
                        "assets/images/Item_1.png", // your image
                        fit: BoxFit.cover,
                      ),
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Align(
                                alignment: Alignment.topRight,
                                child: GestureDetector(
                                    onTap: () {},
                                    child: Image.asset(
                                        "assets/images/Item_1.png", // your icon/image
                                        width: 50,
                                        height: 30,
                                        )),
                              ),
                              Text(
                                "Circle Miracle Plate Studs Earrings",
                                style: TextStyle(
                                    fontSize: 13, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                "SKU: 23fe42f44",
                                style: TextStyle(fontSize: 13),
                              ),
                              SizedBox(height: 5),
                              Text(
                                "\$ 7,500",
                                style: TextStyle(fontSize: 13),
                              ),
                              Row(children: [
                                Text(
                                  "Qty:  ",
                                  style: TextStyle(fontWeight: FontWeight.bold),
                                ),
                                DropdownButton<String>(
                                  value: dropdownValue,
                                  icon: Icon(Icons.arrow_downward),
                                  iconSize: 20,
                                  style: TextStyle(color: Colors.deepPurple),
                                  onChanged: (String newValue) {
                                    setState(() {
                                      dropdownValue = newValue;
                                    });
                                  },
                                  items: <String>['One', 'Two', 'Free', 'Four']
                                      .map<DropdownMenuItem<String>>(
                                          (String value) {
                                    return DropdownMenuItem<String>(
                                      value: value,
                                      child: Text(value),
                                    );
                                  }).toList(),
                                )
                              ]),
                              Text("Ship By: 30 June2020")
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),
        ),
        Container(
          height: 100,
          decoration: BoxDecoration(color: Colors.white),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Summary",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
              SizedBox(
                height: 12,
              ),
              Table(children: [
                TableRow(children: [
                  Text("Subtotal"),
                  Text("102000"),
                ]),
                TableRow(children: [
                  Text("Shipping Charge"),
                  Text("Free"),
                ]),
                TableRow(children: [
                  Text("Shipping Insurance"),
                  Text("Free"),
                ]),
                TableRow(children: [
                  Text("Grand Total"),
                  Text("102000"),
                ]),
              ]),
            ],
          ),
        )
      ],
    )

;