CODEWITHSUNDEEP
flutter
irongirl
irongirl

Reputation: 925

Layout in list tile - flutter

Current output:

enter image description here

Expected output:

enter image description here

Code:

SizedBox(
      width: 380,
      height: 180,
      child: Swiper(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              Expanded(
                child: Card(
                  child: ListTile(
                    title: Text(
                      '${items[index].title}',
                    ),
                    subtitle: Text(
                      '${items[index].body}',
                    ),
                    trailing: Column(
                      children: <Widget>[
                        CircleAvatar(
                          backgroundColor: HexColor("#0087a8"),
                          child: IconButton(
                            icon: Icon(Icons.add),
                      ],
                    ),
                  ),
                ),
              )
            ],
          );
        },
        viewportFraction: 0.8,
        scale: 0.9,
        control: SwiperControl(color: Colors.white),
      ),
    );

I am unable to create the icon button to be that way. As when i put in padding, it says that the pixels overflowed. I need to get the add button on the bottom right hand side.

Upvotes: 5

Views: 17363

Answers (3)

Miguel Ruivo
Miguel Ruivo

Reputation: 17736

As already pointed out, you shouldn't use a ListTile for this, as you want to use more than just a title, subtitle for your content.

The reason I've picked a Stack over a Column here, is that it allows you to safely use it in different size screens whilst assuring the view won't overflow. With Column, it would use the button diameter as the whole space to use (vertically), even though it is restrict to the right side of the box.

I believe this is what you're looking for.

example

class MyListTile extends StatelessWidget {
  const MyListTile({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 180.0,
      color: const Color(0xff0087a8),
      child: Container(
        padding: const EdgeInsets.all(20.0),
        margin: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: const Color.fromRGBO(19, 12, 117, 1.0),
        ),
        child: Stack(
          children: <Widget>[
            Text(
              'EUR - USD',
              style: Theme.of(context).textTheme.display2.copyWith(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Forex',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: FloatingActionButton(
                backgroundColor: const Color(0xff0087a8),
                onPressed: () {},
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 50.0,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 6

Nikhat Shaikh
Nikhat Shaikh

Reputation: 3685

Use custom widget for list item OR column from below code for single view. To align left and right you have to put your view in 'Align' as in below -

class _ItemsState extends State<Items> {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
            body: SizedBox(
                width: 380,
                height: 160,
                child: Card(
                    child: ListView.builder(
                        itemCount: 1,
                        itemBuilder: (context, index) {
                          return

                            Padding(padding: EdgeInsets.all(10.0),child:   Column(children: <Widget>[
                              Align(
                                alignment: Alignment.centerLeft,
                                child: Column(children: <Widget>[
                                  Text(
                                    'title',
                                    style: TextStyle(fontSize: 20.0 , fontWeight: FontWeight.bold,),
                                  ),
                                  Text(
                                    'body',
                                    style: TextStyle(fontSize: 14.0),  )
                                ]),
                              ),
                              Align(
                                  alignment: Alignment.centerRight,
                                  child:  CircleAvatar(
                                      maxRadius: 20.0,
                                      backgroundColor: Colors.blueGrey,
                                      child: IconButton(
                                        icon: Icon(Icons.add,
color: Colors.white,),
                                      ))
                              )
                            ]));




                        }))));
      }
    }

Upvotes: 1

Lakhwinder Singh
Lakhwinder Singh

Reputation: 7209

Try this code

Container(
        height: 180,
        width: double.infinity,
        child: Card(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'EUR/USD',
                      style: TextStyle(fontSize: 40),
                    ),
                    Text('FOREX', style: TextStyle(fontSize: 20)),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    CircleAvatar(
                        backgroundColor: Colors.blueAccent,
                        child: IconButton(
                          onPressed: () {
                            print('On Pressed');
                          },
                          icon: Icon(Icons.add),
                        )),
                  ],
                )
              ],
            ),
          ),
        ),
      )

See the image

Upvotes: 3

Related Questions