Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Layout in list tile - flutter

Tags:

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.

like image 831
irongirl Avatar asked May 27 '19 04:05

irongirl


Video Answer


1 Answers

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,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
like image 158
Miguel Ruivo Avatar answered Sep 28 '22 13:09

Miguel Ruivo