Flutter 如何只给一个容器边框底部

Question

In Flutter how to set a border for the bottom only,

As shown in the picture below, I have a Container with Text, showing a red color border from the bottom, Kindly guide how to set a border from the bottom only.

Answer 1

Use Border with the bottom argument.

Container(
          decoration: BoxDecoration(
            Border(
              bottom: BorderSide(width: 1.5, color: Colors.grey[300]),
            ),
          ),
          child: ListTile(
            title: Text(title),
            subtitle: Text(score + dateFormatted),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
                 children: [
                    Text(amount),
                    Checkbox(
                       value: false,
                       activeColor: Colors.green,
                       onChanged: (bool newValue) {}),
                    ],
                   ),
           ),
);

Answer 2

better to use ListView.separator constructor

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: Home()));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(body: Demo());
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 42,
      separatorBuilder: (_, __) => Container(height: 1.5, color: Colors.grey[300]),
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('item $index'),
        );
      },
    );
  }
}