isso kd
isso kd

Reputation: 389

how to control height of listview of flutter- headash

listview is taking all the page while its content is 25% of the page and I want to put something under it ..

how to control the height of it and i the custom_listview is useless i can put it directly in my screen so what do u think

a screenshot is at the buttom of my question.

please help me, because im getting headach of it and stopping coding

custom_listview


class CustomListView_issues extends StatelessWidget {
    final List<Issue> issues;
    CustomListView_issues(this.issues);

    Widget build(context) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: issues.length,
            itemBuilder: (context, int currentIndex) {
                return Stack(
                    children: <Widget>[
                        Container(
                            width:double.infinity,
                            color: Colors.grey[50],
                            child: createViewItem(issues[currentIndex], context)
                        )
                    ],
                );
            },
        );
    }

    Widget createViewItem(Issue issue, BuildContext context) {
        return new Container(
            decoration: BoxDecoration(
                color: Colors.grey[50],
            ),
            child: ListTile(
                title: new Card(
                    elevation: 0,
                    child: new Container(
                        color: Colors.grey[50],
                        width: 100,
                        child: Column(
                            children: <Widget>[
                                _getListTile(issue.issueNote, issue.image)
                            ],
                        ),
                    ),
                )
            )
        );
    }

    Widget _getListTile(issueNote,image){
        return new Container(
            width:double.infinity,
            color: Colors.grey[50],
         //   height: 50.0,
            child: new Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                    _getIssueNoteWidget(issueNote),
                    _getImgWidget(image)
                ],
            ),
        );
    }


    Widget _getIssueNoteWidget(String description){
        return new Container(
            width: 200,
            margin: new EdgeInsets.only(top: 5),
            child: Text(description, maxLines: 3 ,style: new TextStyle(fontSize: 15))
        );
    }


    Widget _getImgWidget(String url){
        return new Container(
            width: 50.0,
            height: 30.0,
            child: new ClipRRect(
                borderRadius: new BorderRadius.only(topLeft: const Radius.circular(1.0),bottomLeft: const Radius.circular(6.0)),
                child: new Image.asset('images/place_holder.jpg')
            ),
        );
    }

}
//end class customListView

my screen

body: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                   Container(
                       .... codes
                    ),
                    Expanded(child: _getExpanded()),
                    Container(
                        child:Column(
                            children: [
                                Text("Address")
                            ],
                        )
                    ),

                ],
            )

 Widget _getExpanded() {
        return Stack(
            children: [
                Container(child: CustomListView_issues(issues))
            ],
        );
    }

look at the result enter image description here

please help if u can ..

edit: listview height isnt fixed, it may has 1 children or may 10 children

Upvotes: 1

Views: 834

Answers (2)

Ovidiu Uşvat
Ovidiu Uşvat

Reputation: 823

Wrap the ListView in a container.

You can wrap your ListView in a Container widget and set a fixed height:

 Widget build(context) {
        return Container(
          height: 100px //here you set desired height
          ListView.builder(
            shrinkWrap: true,
            itemCount: issues.length,
            itemBuilder: (context, int currentIndex) {
                return Stack(
                    children: <Widget>[
                        Container(
                            width:double.infinity,
                            color: Colors.grey[50],
                            child: createViewItem(issues[currentIndex], context)
                        )
                    ],
                );
            },
        ),
      );
    }

Upvotes: 0

quoci
quoci

Reputation: 3557

This happens because you wraped Expanded around your ListView. If you remove the Expanded your ListView will only take the necessary space.

Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                   Container(
                      // .... codes
                    ),
                    _getExpanded(),
                    Container(
                        child:Column(
                            children: [
                                Text("Address"),
                            ],
                        )
                    ),

                ],
            ),

Upvotes: 2

Related Questions