Frederic Chang
Frederic Chang

Reputation: 549

How to use show icons into expand widget like the block of github in flutter with

There're two questions.

01. I want to show more rows of icons with one List only. As you see from Fig3, I'm using three rows in Expand widget, in Card, and each row has the corresponding List. I think it was not so nice to build like this way.

02. Which widget will be more suitable to build blocks view Github in Flutter?

Fig1.

enter image description here

Fig2.

enter image description here

Fig3.

enter image description here

    body: Container(
        child: Column(
          children: <Widget>[
            Text('TrahsCollection',
              style: const TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13),
            ),
            Flexible(
              child: ListView.builder(
                itemCount: _item.length,
                itemBuilder: (BuildContext context, int index) {
                  final String item = _item[index];
                  final MaterialColor = Colors.blue;
                  return Container(
                      margin: const EdgeInsets.only(top: 5.0),
                      child: Card(
                        margin: EdgeInsets.all(5),
                        elevation: 10,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              flex:2,
                              child: ListTile(
                                leading: CircleAvatar(
                                  backgroundColor: Colors.amber[300],
                                  child: Text("Pop"),
                                ),
                              ),
                            ),
                            const Expanded(
                              flex:3,
                              child: ListTile(
                                title: Text("Title", style: TextStyle(fontSize: 20),),
                                subtitle: Text("SubTitle"),
                              ),
                            ),
                            Expanded(
                              flex:3,
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(2.0),
                                    child: Row(
                                      children: scoreKeeper,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(2.0),
                                    child: Row(
                                      children: scoreKeeper,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(2.0),
                                    child: Row(
                                      children: scoreKeeper,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      )
                  );
                },
              ),
            )
          ],
        ),
      ),

Upvotes: 0

Views: 166

Answers (1)

Liliia
Liliia

Reputation: 71

  1. Your building approach is okey, but you should move your peaces of code to separated widgets
  2. You can use GridView

Upvotes: 1

Related Questions