在未来构建器中的 ListView 构建器中水平滚动 - Flutter

Question

I am trying to create a horizontally scrollable list of cards but it breaks each. I am just not sure where I am going wrong. I tried adding Expandable in several places and I still get errors.

I am hoping this is resolvable or do I need to separate each element within the Container/Column (2nd one).

It is definitely some sort of sizing I am missing but just not able to pinpoint where.

body: SafeArea(
        child: Column(
          children: [
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(...),
                  Padding(...),
                  Padding(...),
                  SizedBox(...),
                  Padding(...),
                  SizedBox(...),
                  Padding(...),
                  SizedBox(...),
                  Container(
                    height: 200,
                    color: Colors.blue[200],
                    child: ListView(
                      shrinkWrap: true,
                      physics: ScrollPhysics(),
                      scrollDirection: Axis.vertical,
                      children: [
                        FutureBuilder(
                          future: getAudioList(),
                          builder: (context, data) {
                            if (data.hasError) {
                              return Center(child: Text("${data.error}"));
                            } else if (data.hasData) {
                              var items = data.data as List<MyOtherFunc>;
                              var categories;
                              //Split into categories
                              if (items != null) {
                                categories = groupBy(
                                    items, (MyOtherFunc ma) => ma.category);
                                Map<String, List<MindfulAudio>> catMap =
                                    categories;
                                return new ListView.builder(
                                  padding:
                                      const EdgeInsets.fromLTRB(8, 0, 8, 0),
                                  itemCount: catMap.length,
                                  physics:
                                      const AlwaysScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemBuilder: (context, index) {
                                    String key = catMap.keys.elementAt(index);
                                    return Card(
                                      child: ListTile(
                                        onTap: () {
                                          Navigator.push(
                                            context,
                                            MaterialPageRoute(
                                              builder: (context) =>
                                                  MyFunc(
                                                      catMap[key], key),
                                            ),
                                          );
                                        },
                                        leading: Icon(icons[index],
                                            size: 25, color: colour[index]),
                                        title: new Text("$key"),
                                        trailing: new IconButton(
                                            onPressed: () {
                                              Navigator.push(
                                                context,
                                                MaterialPageRoute(
                                                  builder: (context) =>
                                                      MyFunc(
                                                          catMap[key], key),
                                                ),
                                              );
                                            },
                                            icon: Icon(
                                              FontAwesomeIcons.chevronRight,
                                              color: PINK,
                                            )),
                                      ),
                                    );
                                  },
                                );
                              }
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            } else {
                              return Center(
                                child: CircularProgressIndicator(),
                              );
                            }
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

Answer 1

Try this layout

SizedBox(
 height: MediaQuery.of(context).size.height,
 width : MediaQuery.of(context).size.width,
 child: SingleChildScrollView (
  child: Column(
   children: [
    //Other widgets which will scroll vertically in the column
     SingleChildScrollView (
      scrollDirection: Axis.horizontal,
      child: Row(
      mainAxisSize: MainAxisSize.min,
        children: [
         //Items you wish to scroll horizontally 
       ]
      )
    ),
    //Some more widgets if you wish to add below the horizontal scroll
   ]
  )
 )
)