CODEWITHSUNDEEP
flutterflutter-layout
Dani
Dani

Reputation: 4196

Flutter: ListTile width

I have this code displaying 2 ListTiles in the same line:

Row(
                children: <Widget>[
                  Flexible(
                    child: ListTile(
                      leading: Icon(Icons.call),
                      title: TextFormField(
                        controller: _phoneNumberController,
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                            hintText: translate('contact_list.number')),
                        validator: (value) {
                          return Helpers.checkInput(value);
                        },
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListTile(
                      title: TextFormField(
                        controller: _phoneNumberController,
                        keyboardType: TextInputType.phone,
                        decoration: InputDecoration(
                            hintText: translate('contact_list.number')),
                        validator: (value) {
                          return Helpers.checkInput(value);
                        },
                      ),
                    ),
                  ),
                ],
              ),

Both of them are taking 50% of the space but I'd need the first one taking a fixed width.

What I'm trying to archive is display a telephone number input with its phone code on the left (and that needs to be smaller)

Upvotes: 4

Views: 13556

Answers (3)

Jason
Jason

Reputation: 933

Flutter ListTiles have built-in padding.

Flutter ListTile Documentation

ListTile(
  contentPadding: const EdgeInsets.symmetric(horizontal: 0.0), // Change this...
  title: const Text("List Tiles"),
  subtitle: const Text("Have built-in default padding."),
  trailing: IconButton(
    onPressed: () {},
    icon: const Icon(Icons.abc),
  ),
),

Upvotes: 1

Brian Mahecha
Brian Mahecha

Reputation: 217

This also works wrapping ListTile in a Container widget

Container {
   width: 600,
   child: ListTile(...)
}

Upvotes: -1

kounex
kounex

Reputation: 1715

This could be a possible solution for what you are looking for:

Row(
  children: <Widget>[
    ConstrainedBox(
      constraints: BoxConstraints(
        /// Just an example, but this makes sure, that since you set a fixed width like 300.0, on small screens this won't get too big. For example by setting a maxWidth constraint like this, its width will be 300.0, but at max as big as 1 / 3 of the screen width so it gets smaller on small screen sizes
        maxWidth: MediaQuery.of(context).size.width / 3,
      ),
      child: SizedBox(
        /// Enter your fixed width here, 300.0 ist just an example
        width: 300.0,
        child: ListTile(
          leading: Icon(Icons.call),
          title: TextFormField(
            controller: _phoneNumberController,
            keyboardType: TextInputType.phone,
            decoration: InputDecoration(
                hintText: translate('contact_list.number')),
            validator: (value) {
              return Helpers.checkInput(value);
            },
          ),
        ),
      ),
    ),
    Expanded(
      child: ListTile(
        title: TextFormField(
          controller: _phoneNumberController,
          keyboardType: TextInputType.phone,
          decoration: InputDecoration(
              hintText: translate('contact_list.number')),
          validator: (value) {
            return Helpers.checkInput(value);
          },
        ),
      ),
    ),
  ],
),

Upvotes: 6

Related Questions