Slackみたいなドロワーを作る

個人開発でSNSアプリを作っているのですが、グループ（以下コミュニティとする）機能を実装する際にSlackのワークスペースを選択するような実装にしたいと思い取り掛かりました。

目指すもの

以下の様にドロワーでワークスペース一覧&選択ができるようにしたい。
とくに可視性を考慮して、【大きな角どりアイコン（正方形）】＋【名前】のリストタイルを実現したい

実装

ドロワーの部分はListViewを子に持つColumnで簡単に実装できる。
肝心はListViewで返すセルWidgetでした。
以下の様にListTileでは、画像が横長になってしまいうまくできませんでした。

失敗

Widget build(BuildContext context) {
    return ListTile(
      leading: SizedBox(
        child: Container(
          height: MediaQuery.of(context).size.width * 0.2,
          width: MediaQuery.of(context).size.width * 0.2,
            child: ClipRRect(
                child: Image.network(
                  communityImageUrl,
                  fit: BoxFit.cover,
                ),
              borderRadius: BorderRadius.circular(8),
            ),
        ),
      ),
        title: Text(
          communityName,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            color: Colors.white
          ),
        )
    );
  }
}

恐らく、リストタイルのleadingプロパティに指定できるWidgetの最大サイズを超えているのだと思われます。

ListTileを止めて、自作で作ることにしました。以前お世話になったインターンのエンジニアも“ListTileはつかわないほうが自由が利く”とおっしゃっていましたし、なるべく自分で作ったほうがいいのかもしれません

解決

  Widget build(BuildContext context) {
    return Row(
       children: [
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Container(
             height: MediaQuery.of(context).size.width * 0.2,
             width: MediaQuery.of(context).size.width * 0.2,
             child: ClipRRect(
               child: Image.network(
                 communityImageUrl,
                 fit: BoxFit.cover,
               ),
               borderRadius: BorderRadius.circular(8),
             ),
           ),
         ),
         Text(
           communityName,
           style: TextStyle(
               fontWeight: FontWeight.bold,
               fontSize: 20,
               color: Colors.white
           ),
         )
       ],
    );
  }
}