Flutter: ListTile width

user_4858133 0
Viewed 5169

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)

flutter-layout flutter
1 Answers

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);
          },
        ),
      ),
    ),
  ],
),
user_114404490
Related