I am using flutter_slidable package and I want to implement slidable text, when trying to slide the text overflows the container’s border.
How can I implement it so that, the text doesn’t overflows the borders?
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(),
),
height: 200,
width: 200,
child: Slidable(
// The start action pane is the one at the left or the top side.
startActionPane: ActionPane(
// A motion is a widget used to control how the pane animates.
motion: const ScrollMotion(),
// All actions are defined in the children parameter.
children: [
SlidableAction(
onPressed: (context) {},
backgroundColor: Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.share,
label: 'Share',
),
],
),
// The end action pane is the one at the right or the bottom side.
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
SlidableAction(
onPressed: (context) {},
backgroundColor: Color(0xFF0392CF),
foregroundColor: Colors.white,
icon: Icons.save,
label: 'Save',
),
],
),
// The child of the Slidable is what the user sees when the
// component is not dragged.
child: const ListTile(title: Text('Slide me')),
),
),
),
),
);
}
}
>Solution :
The default clipBehavior of the container is Clip.none. You can provide other than none.
child: Container(
clipBehavior: Clip.hardEdge, // this
decoration: BoxDecoration(
border: Border.all(),
),
height: 200,
width: 200,
child: Slidable(