Navigation drawer text parallel

Question

How to make the children text align parallel to "Operator"?

I want something like this

Here my code

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          _createHeader(context),
          ExpansionTile(
            childrenPadding: EdgeInsets.zero,
            expandedCrossAxisAlignment: CrossAxisAlignment.start,
            title: Text("operator".tr()),
            leading: const Icon(Icons.person), //add icon
            children: [
              ListTile(
                title: Text("dashboard".tr()),
                onTap: () {
                  //action on press
                },
              ),
              ListTile(
                title: Text("properties".tr()),
                onTap: () {
                  //action on press
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

Any help would be appreciated.

Answer 1

ExpansionTile is basically a ListTile that expands to reveal its children. In your example, since the children are ListTile\s, we are looking at an expansion of what is already the parent widget. So you do to the children, what you have done to the ExpansionTile.

The ListTile widget is separated into three main row sections which are the leading, title x subtitle and trailing widgets. Each of these sections is evenly spaced by the tilePadding parameter which defaults to EdgeInsets.symmetric(horizontal: 16.0).

The leading widget is nullable, hence if you do not explicitly define a widget for leading, it will not occupy any space. So to make your children ListTile\s align with the ExpansionTile, you need to explicitly define a widget for leading just as you have done with leading: const Icon(Icons.person). However, because you most likely don't want to actually display a widget there, we can safely do leading: const SizedBox() and we have our solution

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          _createHeader(context),
          ExpansionTile(
            childrenPadding: EdgeInsets.zero,
            expandedCrossAxisAlignment: CrossAxisAlignment.start,
            title: Text("operator".tr()),
            leading: const Icon(Icons.person), //add icon
            children: [
              ListTile(
                leading: const SizedBox(),
                title: Text("dashboard".tr()),
                onTap: () {
                  //action on press
                },
              ),
              ListTile(
                leading: const SizedBox(),
                title: Text("properties".tr()),
                onTap: () {
                  //action on press
                },
              ),
            ],
          ),
        ],
      ),
    );
  }