flutterborderlisttile

Column of Listtile with rounded corner at beginning and end


I'm trying to have a column of list tiles where the top and bottom corners are rounded. Some tiles change colors when hovered and other don't. Hence, I have tried to two things:

Sadly, in both cases, the background color of the list tile overflow from the rounded container as seen in this image:

Example result

Here is the sample code for the second try:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(
      5,
      (i) => ListTile(
          tileColor: Colors.green, hoverColor: Colors.red, title: Text('$i')));

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: List.generate(
        children.length,
        (index) {
          if (index == 0 && index == children.length - 1) {
            return Ink(
              // clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
              ),
              child: children[index],
            );
          }
          if (index == 0) {
            return Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)),
                color: Colors.blue,
              ),
              child: children[index],
            );
          } else if (index == children.length - 1) {
            return Container(
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.red,
                ),
                borderRadius: const BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20)),
                color: Colors.blue,
              ),
              child: children[index],
            );
          }

          return children[index];
        },
      ),
    );
  }
}

Where children is a list of listile and other elements.

How can a force element in children to respect the border limits set up by the parent container?


Solution

  • I have ended-up posting an Issue on Github.

    The solution a Card with clipBehavior: Clip.antiAlias.