I am using the Flutter slidable package in my app. I discovered the Container I used in the secondaryAction list of the Slidable Widget has a different height from the list item. For better understanding are two images of the app. Before sliding the list item and after sliding.
Please how can i make that container with black color be same height as the container with green color.
Below is the code implemented for the list design in flutter.
Code for the List Item Design
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
// import 'meal_model.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class MealWidget extends StatelessWidget {
final Widget image;
final String title, subtitle, price;
MealWidget(
{required this.image,
required this.title,
required this.subtitle,
required this.price});
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
double height = size.height;
double width = size.width;
double height2 = height * 0.17;
return Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
secondaryActions: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Container(
margin: EdgeInsets.only(top: 0),
height: height * 0.17,
width: width * 0.3,
child: Container(
height: height2 * 0.02,
width: height2 * 0.02,
decoration: BoxDecoration(
color: Color(0xFFF54749), shape: BoxShape.circle),
),
decoration: BoxDecoration(
color: Color(0xFF100B18),
borderRadius: BorderRadius.circular(20)),
),
),
],
child: Container(
height: height2,
width: width,
margin: EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
color: Colors.green, borderRadius: BorderRadius.circular(20)),
child: Row(
children: [
ClipPath(
clipper: BackgroundClipper(),
child: Container(
height: height * 0.17,
width: width * 0.5,
decoration: BoxDecoration(color: Colors.white),
child: image,
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(right: 10, top: 15, bottom: 15),
width: width * 0.5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(title,
style: TextStyle(
fontSize: 26,
fontFamily: 'Fira',
fontWeight: FontWeight.w600)),
Text(subtitle,
style: TextStyle(
fontSize: 18,
fontFamily: 'Fira',
fontWeight: FontWeight.w500)),
Text(price,
style: TextStyle(
fontSize: 22,
fontFamily: 'Fira',
fontWeight: FontWeight.bold))
],
),
),
)
],
),
),
);
}
}
class BackgroundClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var roundnessFactor = 20.0;
var path = Path();
path.moveTo(0, 20);
path.lineTo(0, size.height - roundnessFactor);
path.quadraticBezierTo(0, size.height, roundnessFactor, size.height);
path.lineTo(size.width - roundnessFactor, size.height);
path.quadraticBezierTo(
size.width, size.height, size.width, size.height - roundnessFactor);
path.lineTo(size.width * 0.8, 10);
path.quadraticBezierTo(size.width * 0.78, 0, size.width * 0.75, 0);
path.lineTo(roundnessFactor, 0);
path.quadraticBezierTo(0, 0, 0, roundnessFactor);
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
Code for where the list item is implemented in a ListView
import 'package:clip/profile_image.dart';
import 'package:flutter/material.dart';
import 'meal.dart';
import 'meal_model.dart';
import 'dropdown.dart';
class MenuPage extends StatefulWidget {
const MenuPage({Key? key}) : super(key: key);
@override
_MenuPageState createState() => _MenuPageState();
}
class _MenuPageState extends State<MenuPage> {
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
double height = size.height;
double width = size.width;
return GestureDetector(
onTap: () {
FocusNode isCurrentFocusNode = FocusScope.of(context);
if (!isCurrentFocusNode.hasPrimaryFocus) {
isCurrentFocusNode.unfocus();
}
},
child: Scaffold(
backgroundColor: Color(0xFFF7F7F7),
appBar: AppBar(
toolbarHeight: height * 0.09,
backgroundColor: Colors.white,
elevation: 0,
title: Center(child: LocationDropdown()),
actions: [
ProfileImage(),
SizedBox(
width: width * 0.05,
),
],
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(),
body: Container(
padding: EdgeInsets.symmetric(
vertical: height * 0.02, horizontal: width * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hello, Jenny',
style: TextStyle(fontSize: 32),
),
RichText(
text: TextSpan(
text: 'Best Food for ',
style: TextStyle(
fontSize: 36,
color: Colors.black,
fontWeight: FontWeight.bold),
children: [
TextSpan(
text: 'you', style: TextStyle(color: Color(0xFFF54749)))
])),
SizedBox(
height: height * 0.04,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Material(
elevation: 1,
borderRadius: BorderRadius.circular(10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
width: width * 0.7,
height: height * 0.05,
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
labelText: 'Search',
labelStyle: TextStyle(fontSize: 22),
border: OutlineInputBorder(
borderSide: BorderSide.none)),
),
),
),
Material(
elevation: 1,
borderRadius: BorderRadius.circular(10),
child: Container(
width: width * 0.12,
height: height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'images/filter.png',
)),
borderRadius: BorderRadius.circular(10),
color: Color(0xFFF54749),
),
),
)
],
),
SizedBox(
height: height * 0.05,
),
Container(
height: height * 0.06,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: meals.length,
itemBuilder: (BuildContext context, int index) =>
GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
});
},
child: Container(
margin: EdgeInsets.only(right: 15),
height: height * 0.06,
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: selectedIndex == index
? Color(0xFFF54749)
: Color(0xFFEBEBEB),
borderRadius: BorderRadius.circular(10)),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Container(
height: height * 0.03,
width: height * 0.03,
child: meals[index].mealIcon,
),
SizedBox(
width: width * 0.03,
),
Text(
meals[index].mealCategory,
style: TextStyle(
fontSize: 22,
fontWeight: selectedIndex == index
? FontWeight.bold
: null,
color: selectedIndex == index
? Colors.white
: null),
)
],
)),
)),
),
SizedBox(
height: height * 0.05,
),
Expanded(
child: ListView.builder(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: meal.length,
itemBuilder: (context, index) => MealWidget(
image: meal[index].mealImage,
title: meal[index].mealName,
subtitle: meal[index].mealType,
price: meal[index].mealAmount,
)),
),
],
),
),
),
);
}
}