Horizontally Scrollable List with Alignment in Flutter-CodePudding

I'm trying to implement a horizontally scrollable list in flutter.

Option 1

 SingleChildScrollView(
   scrollDirection: Axis.horizontal,
   child: Row(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     children: [Text('123'), Text('456')],
   ),
 );

Works but mainAxisAlignment is ignored due to SingleChildScrollView

Option 2

 ListView(
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  children: [Text('123'), Text('456')],
);

Results in the following Exception:

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1874 pos 16: 'constraints.hasBoundedHeight': is not true.
package:flutter/…/rendering/viewport.dart:1874
2

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
ListView

CodePudding user response：

Try this it's working well

Widget build(BuildContext context) {
  Widget horizontalList1 =Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child: new ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(width: 160.0, color: Colors.red,),
          Container(width: 160.0, color: Colors.orange,),
        ],
      )
  );

  return new Scaffold(
    appBar: new AppBar(
      title: new Text(widget.title),
    ),
    body: Container(
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
            ],
          ),
          ]),
    ),
  ),
  );

CodePudding user response：

Your second implementation error suggests that you did not specify a height for your list items. You can try the following to create a horizontal list. To add spaces between two list items, use separatorBuilder and use divider widget or sizedbox whichever you like.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  List someItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 1', 'Item 2', 'Item 3', 'Item 4'];
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 50,
        width: double.infinity,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: someItems.length,
          itemBuilder: (context, index) {
            return Card(
              child: Text(someItems[index])
              );
          },
          separatorBuilder: (context, index) {
            return SizedBox(width: 100);
          },
        ),
      );
  }
}