虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterでよくあるマテリアルリストを作る

f:id:superman199323:20190212222159p:plain

上のようなレイアウトを作る方法について書きます

return ListView.builder(
            itemCount: 1,
            itemBuilder: (context, index) {

                  return Container(
                    margin: const EdgeInsets.only(top: 10),
                    child: ListTile(
                      title: Text("テスト2"),
                      leading: Material(
                          child: CachedNetworkImage(
                              imageUrl: "Image URL",
                              width: 60.0,
                              height: 60.0,
                              fit: BoxFit.cover),
                          borderRadius: BorderRadius.all(Radius.circular(30.0)),
                          clipBehavior: Clip.hardEdge),
                      trailing: OutlineButton(
                        borderSide: BorderSide(color: Colors.red),
                        onPressed: (){
                          // TAP event
                        },
                        child: const Text("ブロックを解除する", style: const TextStyle(color: Colors.red),),
                      ),
                    ),
                  );
                },
              );
            },
          );[f:id:superman199323:20190212222159p:plain]