[解決済み] Flutter : ListViewにヘッダー列を追加する方法

質問

Flutterの超初心者です。 データのHTTPリクエストを利用したり、ListViewを構築したり、そのListのRowを編集したり、基本的なことはできるようになりました。 素晴らしい環境です。

ListViewのHeaderをどうにか組み立ててみたのですが...これが正しくないことは分かっています。 Headerのテキストがうまく並べられないのです。

DrawerクラスがDrawerHeaderクラスを持っているのはわかるが、ListViewがListViewHeaderを持っているのがわからない。

  オーバーライド
  ウィジェット構築(BuildContext context) { {
    return Scaffold(
        appBar: AppBar(
          title: テキスト('Contacts'),
          アクション [
            IconButton(icon: Icon(Icons.add_circle),
                onPressed: getCustData
            ),
          ],
        ),
        //body:
        ボディ 列(
            children: [
              行(
                  子プロセスを作成します。[
                    拡張(child: Text('', style: TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    Expanded(child: Text('ファーストネーム', style:  TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    Expanded(child: Text('姓', style:  TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    Expanded(child: Text('市', style: TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    Expanded(child: Text('顧客ID', style: TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                    Expanded(child: Text(', style: TextStyle(height: 3.0, fontSize: 15.2, fontWeight: FontWeight.bold,))),
                  ]
              ),


          Expanded(child:Container(
            child: ListView.builder(

              itemCount: data == null ? 0 : data.length,
              itemBuilder: (BuildContext context, int index) {

                return InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => APIDetailView(data[index])),
                    );
                  },

                  child: ListTile(                //return new ListTile(
                      onTap: null,
                      leading: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text(data[index]["FirstName"][0]),
                      ),
                      title: Row(
                          children: <Widget>[
                            Expanded(child: Text(data[index]["FirstName"])),
                            Expanded(child: Text(data[index]["LastName"])),
                            Expanded(child: Text(data[index]["Bill_City"])),
                            Expanded(child: Text(data[index]["Customer_Id"])),
                          ]
                      )
                  ),

                );
              }, //itemBuilder

            ),
          ),
        ),
      ]
    )
);

} }

ありがとうございます。

どのように解決するのですか？

これは私が解決した方法です。 他の解決策を考えさせてくれた@najeiraに感謝します。

最初の本文カラムでは、ヘッダで使用したのと同じレイアウトを ListTile .

なぜなら、私のデータ ListTil e には、この場合 CircleAvatar を含むため、すべての横方向の間隔が少しずれています...。5カラムで CircleAvatar がレンダリングされた後、等間隔で4つの列が表示されます。

そこで...私は ListTile を最初のボディに Column , a CircleAvatar で backgroundColor が透明で、次に Row で4つの見出しを作成しました。

        ListTile(
        onTap: null,
        leading: CircleAvatar(
          backgroundColor: Colors.transparent,
        ),
        title: Row(
            children: <Widget>[
              Expanded(child: Text("First Name")),
              Expanded(child: Text("Last Name")),
              Expanded(child: Text("City")),
              Expanded(child: Text("Id")),
            ]
        ),
      ),