How do I create a list view of buttons in flutter?

Question

I am trying to develop an app in flutter, that has topics that the user can select and will bring them to a new page with info on that topic. To do this I decided a list view of buttons would word, where they can scroll and select a topic. I have code right now that has a button that brings the user to another page, I was wondering how I could ad a list of buttons that are all different, and the main page to have scrolling.

import 'package:flutter/material.dart';

void main() => runApp(new MainScreen());

class MainScreen extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return new Scaffold (
        appBar: new AppBar(
          title: new Text('First Screen'),
        ),
        body: new Center(
          child: new RaisedButton(
            child: new Text('Launch to new screen'),
            onPressed: () {
              Navigator.push(
                context,
                new MaterialPageRoute(builder: (context) => new 
SecondScreen()),
                );
              },
          ),
      ),
    );
  }
}


class SecondScreen extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Second Screen"),
        ),
        body: new Center(
          child: new RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: new Text('Go back'),
        ),
      ),
    );
  }
}

Answer 1

List View with button:

class SongDetail {
  String strTitle;
  var isFavorite = false;
  SongDetail (this.strTitle, this.isFavorite);
}

List<SongDetail> arrSongList = [];

 ListView.builder(
                        itemCount: arrSongList.length,
                        itemBuilder: (BuildContext context, int index) {
                          return new GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) =>
                                          CardDemo(arrSongList[index])));
                            },
                            child: Container(
                                height: 45.0,
                                decoration: BoxDecoration(
                                ),
                                child: new Column(
                                  children: <Widget>[
                                    Container(
                                      padding: EdgeInsets.only(left: 15.0, right: 15.0),
                                      child: new Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          new Container(
                                            child: Text(
                                              arrSongList[index].strTitle,
                                              textAlign: TextAlign.left,
                                              style: TextStyle(
                                                  fontSize: AppSetting.appFontSize),
                                              maxLines: 1,
                                            ),
                                            decoration: BoxDecoration(
                                                borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0))
                                            ),
                                          ),
                                          new GestureDetector(
                                            onTap: () {
                                              setState(() {
                                                arrSongList[index].isFavorite =
                                                !arrSongList[index].isFavorite;
                                              });
                                            },
                                            child: new Container(
                                                margin: const EdgeInsets.all(0.0),
                                                child: new Icon(
                                                  arrSongList[index].isFavorite
                                                      ? Icons.favorite
                                                      : Icons.favorite_border,
                                                  color: Colors.red,
                                                  size: 30.0,
                                                )),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      padding: EdgeInsets.only(
                                          left: 15.0, right: 15.0, top: 0.0),
                                      child: Container(
                                        color: AppSetting.appBgColor,
                                        height: 1.0,
                                      ),
                                    ),
                                  ],
                                )
                            ),
                          );
                        },
                      )

Result:

Heart button is clickable on listview

Answer 2

I'd recommend reading the flutter documentation and in particular looking at some of the examples - the stocks example in particular comes to mind as one that does exactly what you're asking for. Also, the layout tutorial could be helpful, and the widget catalog is a good place to start when you're looking for a particular UI element.

But the TLDR of the documentation is that you want to have a ListView with all your items on the main page. Each of the items would contain a button and text, or whatever you want to be there. ListView scrolls automatically.

If the items in the listview are all different except some text or something else simple like that, you should either use a ListView.builder, or define your own Stateless/Stateful widget that actually builds an item from parameters you pass in for each item.

Answer 3

ListTile is the widget you are looking for.