Как добавить горизонтальное изображение, установленное во флаттере?

Question

Привет, я пытаюсь сделать что-то вроде этого.Все черные шары - изображения в формате png.

До сих пор я пробовал это,

final bolabola = ListView(
      shrinkWrap: true,
      //scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
            width: 20.0,
            child: Image(
              image: AssetImage("assets/scoreballs/n1.png",),
              height: 25.0,
              width: 25.0,
            ),
        ),

        Container(
          width: 20.0,
          child: Image(
            image: AssetImage("assets/scoreballs/n1.png",),
            height: 25.0,
            width: 25.0,
          ),
        )
      ],


    );

scrollDirection не работало, потому что я использую другое представление списка для отображения всех своих компонентов на странице.Как мне это исправить?

Редактировать: мой полный код ниже

import 'package:flutter/material.dart';

class Live extends StatefulWidget{
  State<StatefulWidget> createState(){
    return LiveState();
  }
}

class LiveState extends State<Live> {

  @override
  Widget build(BuildContext context) {

    //Live button
    final livestatus = Chip(
        backgroundColor: Colors.red,
        label: Text("LIVE",style: TextStyle(fontSize: 9.0, fontWeight: FontWeight.bold, color: Colors.white), textAlign: TextAlign.center),
    );

    //Status bar
    final status = Text("Richmond College won the toss and elected to bat first", style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold), textAlign: TextAlign.center);

    //School Crest
    final crest = Image(
        image: AssetImage("assets/crest.png"),
        height: 79.0,
        width: 64.0,
    );

    final score = Text("182/4", style: TextStyle(fontSize: 73.0, color: Colors.blueAccent, fontWeight: FontWeight.bold), textAlign: TextAlign.center,);

    final overs = Text("23.5 Overs", style:TextStyle(fontSize: 30.0, color: Colors.grey, fontWeight: FontWeight.bold),textAlign: TextAlign.center, );

    final scorecard = Text("Scorecard", style:TextStyle(fontSize: 10.0, color: Colors.black, fontWeight: FontWeight.bold),textAlign: TextAlign.center, );

    final bolabola = ListView(
      shrinkWrap: true,
      //scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
            width: 20.0,
            child: Image(
              image: AssetImage("assets/scoreballs/n1.png",),
              height: 25.0,
              width: 25.0,
            ),
        ),

        Container(
          width: 20.0,
          child: Image(
            image: AssetImage("assets/scoreballs/n1.png",),
            height: 25.0,
            width: 25.0,
          ),
        )
      ],


    );


/*
    final scoreballs = Image(
      image: AssetImage("assets/scoreballs/n1.png",),
      height: 25.0,
      width: 25.0,
    );

    */

        return Scaffold(
          backgroundColor: Colors.white,
          body: Center(
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                livestatus,
                SizedBox(height: 0.0),
                status,
                SizedBox(height: 10.0),
                crest,
                SizedBox(height: 5.0),
                score,
                overs,
                scorecard,
                bolabola,


              ],
            )
          ),
        );
  }
}

Answer 1

Добавить scrollDirection: Axis.horizontal к ListView объекту.При использовании горизонтального scrollDirection объект Container должен иметь указанную высоту

Следующий код взят из проекта, в котором мне пришлось реализовать горизонтальную карусель изображений:

Container(
        margin: EdgeInsets.only(top: 20.0),
        height: 200.0,
        child: ListView(
          padding: EdgeInsets.all(0.0), 
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          children: <Widget>[
            Row( 
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: _imagesWidget // this is a list containing Cards with image
            )
          ]
        ),
      );