How to position DataTable columns in Flutter?

Question

I'm working on positioning these columns on my datatable but I can't figure it out. Here is what it currently looks like with the working code:

Container(
          color: Color(0xffF5F5F5),
          child: DataTable(
            headingRowHeight: 40,
            columns: [
              DataColumn(label: IconButton(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
              icon: Icon(Icons.remove_circle, color: Color(0xffB93E3E),),
              onPressed: () {
              // setState(() {
              // // _volume += 10;
              // });
             },
        )),
              DataColumn(label: Text('Text')),
              DataColumn(label: IconButton(
                splashColor: Colors.transparent,
                highlightColor: Colors.transparent,
                icon: Icon(Icons.menu, color: Color(0xff979797),),
                tooltip: 'Hold and move up and down to sort.',
                onPressed: () {
                  // setState(() {
                  //   // _volume += 10;
                  // });
                },
              )),
            ],
            rows: [
            ],
          ),
        ),
        Container(
          color: Color(0xffF5F5F5),
          child: DataTable(
            headingRowHeight: 40,
            columns: [
              DataColumn(
                  label: IconButton(
                    splashColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    icon: Icon(Icons.add_circle, color: Color(0xff58B93E),),
                onPressed: () {
                  // setState(() {
                  // // _volume += 10;
                  // });
                },
              )),
              DataColumn(label: Text('Text')),
            ],
            rows: [
            ],
          ),
        ),

Here is the position that I'd like the columns to be at. As you can see the IconButton is positioned on the left then the text is straight after that and the Menu icon is positioned at the end on the minus button row:

Answer 1

Using simple column and rows.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("your app")),
      body: Column(children: [
        Container(
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
                child: Icon(
                  Icons.remove_circle,
                  color: Colors.red,
                ),
              ),
              Expanded(
                child: Text("your first text"),
              ),
              Padding(
                padding: const EdgeInsets.only(right: 20),
                child: Icon(Icons.menu),
              ),
            ],
          ),
        ),
        Container(
          height: 1,
          color: Colors.grey,
        ),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
              child: Icon(
                Icons.add_circle,
                color: Colors.green,
              ),
            ),
            Expanded(
              child: Text("your second text"),
            ),
          ],
        ),
        Container(
          height: 1,
          color: Colors.grey,
        ),
      ]),
    );
  }
}

Using DataTable. I do not know your need, but to use datatable it is necessary to make a workaround and place the items in the header. This is not highly recommended

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("your app")),
      body: SizedBox(
        width: double.infinity,
        child: DataTable(
            columns: const <DataColumn>[
              DataColumn(
                label: Icon(
                  Icons.remove_circle,
                  color: Colors.red,
                ),
              ),
              DataColumn(
                label: Text(
                  'Your first text',
                ),
              ),
              DataColumn(
                label: Icon(Icons.menu),
              ),
            ],
            headingRowHeight: 40,
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Icon(
                    Icons.add_circle,
                    color: Colors.green,
                  )),
                  DataCell(Text('your second text')),
                  DataCell(Text(
                      "")), // you need 3 datacell because yopur have 3 headers
                ],
              ),
            ]),
      ),
    );
  }
}