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.
2 Answers
Use Border with the bottom argument.
Container(
decoration: BoxDecoration(
border: 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) {}),
],
),
),
);
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'),
);
},
);
}
}
Related