Mohamed Almuetaz Atif
Reputation: 1
Flutter content not Appearing Correctly in release mode but work is perfectly in debug mode
I have flutter app consisting of 3 pages Home ,Category and Vedio Player All of Them appear incorrectly in release mode The home is made using customSliverView containing (SliverAppaBar and SliverBody) Home Page Debug Mode Home Page Release Mode The Category page is just an apple bar with the logo in the middle and a grid Category Page Debug Mode Category Page Release Mode The Vedio is just an apple bar with the logo in the middle and a vedio player (better_player_plus package) Ps. You go to the the video by clicking on any one of the elements in the Home page or the category page Vedio Debug Mode Vedio Release Mode
Below is the code used for the pages Home Page
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBarWidget(),
SliverBodyWidget(),
],
)
);
}
SliverAppBarWidget
Widget build(BuildContext context) {
return SliverAppBar(
leading: IconButton(
onPressed: () {},
icon: Icon(
Icons.menu_sharp,
color: AppColors.backgroundColor,
size: AppConstants.kDeviceWidth * 0.1,
),
),
toolbarHeight: AppConstants.kDeviceWidth * 0.15,
backgroundColor: Colors.yellow.shade600,
// Color.fromRGBO(97, 97, 95, 0.5),
forceElevated: true,
pinned: true,
expandedHeight: AppConstants.kDeviceHeight * 0.1775,
flexibleSpace: Stack(
children: [
FlexibleSpaceBar(
background: Image(
image: AssetImage(Assets.imagesAppBaar),
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomCenter,
child: FractionalTranslation(
translation: Offset(0, 0.5),
child: SizedBox(
width: AppConstants.kDeviceWidth * 0.3,
height: AppConstants.kDeviceWidth * 0.3,
child: Image.asset(
Assets.imagesSoofra,
fit: BoxFit.cover,
)),
),
),
],
),
);
}
SliverBodyWidget
Widget build(BuildContext context) {
return SliverPadding(
padding: EdgeInsets.symmetric(
horizontal: AppConstants.kDeviceWidth * 0.01,
vertical: AppConstants.kDeviceHeight * 0.075,
),
sliver: BlocBuilder<HomeBloc, HomeState>(
builder: (context, state) =>
state.status == HomePageStatus.contentFetched?
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(
right: AppConstants.kDeviceWidth * 0.05),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton.icon(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => CategoryPage(
categoryId: state.genres[index].id,
categoryName: state.genres[index].name,
),
),
);
},
label: Text(
"See All",
style: TextStyle(
color: AppColors.genreLabelColor,
fontSize: 18,
),
),
icon: Icon(
Icons.arrow_back_ios_outlined,
color: AppColors.genreLabelColor,
size: 18,
),
),
Text(
state.genres[index].name,
style: TextStyle(
color: AppColors.genreLabelColor,
fontWeight: FontWeight.w900,
fontSize: 22,
),
),
],
),
),
SizedBox(
height: AppConstants.kDeviceHeight * 0.325
,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount:
state.content[state.genres[index].id]!.length < 6
? state
.content[state.genres[index].id]!.length
: 6,
itemBuilder: (context, innerIndex) {
return MovieCard(
movieEntity: state
.content[state.genres[index].id]![innerIndex],
);
},
),
),
( AppConstants.kDeviceWidth * 0.05).h
],
);
},
childCount: state.status == HomePageStatus.contentFetched
? state.genres.length - 1
: 0,
),
):SliverFillRemaining(
child:
Lottie.asset(
Assets. lottiesCooking,
animate: true,
repeat: true,
alignment: Alignment.center,
fit: BoxFit.contain,
)
),
),
);
}
MovieCard
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
BlocProvider(
create: (context) => MoviePlayBloc(),
child: MoviePlayPage(
movieId: movieEntity.id, movieName: movieEntity.title,
),
),
),
);
},
child: Container(
margin: EdgeInsets.symmetric(
horizontal: AppConstants.kDeviceWidth * 0.02,
vertical: AppConstants.kDeviceWidth * 0.02,
),
width: AppConstants.kDeviceWidth * 0.45,
height: AppConstants.kDeviceHeight * 0.25,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: AppConstants.kDeviceWidth * 0.015,
),
BoxShadow(
color: Colors.grey,
blurRadius: AppConstants.kDeviceWidth * 0.015,
),
],
borderRadius: BorderRadius.circular(
AppConstants.kDeviceWidth * 0.05,
),
color: Colors.white,
),
child: Column(
children: [
CoverImage(
imagePath: "${AppUrls.kMovieCoverUrl}${movieEntity.thumbnail}",
width: AppConstants.kDeviceWidth * 0.45,
height: AppConstants.kDeviceHeight * 0.225,
borderRadius: AppConstants.kDeviceWidth * 0.05,
),
(AppConstants.kDeviceHeight * 0.01).h,
Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(
movieEntity.title,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: AppConstants.kDeviceWidth * 0.0375,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
)
],
),
),
);
}
CategoryPage
class CategoryPage extends StatelessWidget {
const CategoryPage(
{super.key, required this.categoryId, required this.categoryName});
final int categoryId;
final String categoryName;
@override
Widget build(BuildContext context) {
final content = context.read<HomeBloc>().state.content[categoryId]!;
return SafeArea(
child: Scaffold(
appBar: AppAppBar(),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: AppConstants.kDeviceWidth * 0.02,
vertical: AppConstants.kDeviceWidth * 0.025,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
categoryName,
style: TextStyle(
color: AppColors.genreLabelColor,
fontWeight: FontWeight.w900,
fontSize: 22,
),
),
(AppConstants.kDeviceWidth * 0.05).h,
GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: content.length,
itemBuilder: (context, index) => MovieCard(
movieEntity: content[index],
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1 / 1.5,
mainAxisSpacing: AppConstants.kDeviceHeight * 0.01,
crossAxisSpacing: AppConstants.kDeviceHeight * 0.01,
),
),
],
),
),
),
),
);
}
}
AppAppBar
class AppAppBar extends StatelessWidget implements PreferredSizeWidget {
const AppAppBar({
super.key,
});
@override
Widget build(BuildContext context) {
// var currentLang = context.read<AppLocalizationBloc>().state.selectedLanguage;
return AppBar(
leading: IconButton(
onPressed: (){
Navigator.of(context).pop();
},
icon: const Icon(
Icons.arrow_back_ios_sharp,
color: AppColors.primaryColor,
),
),
// actions:currentLang == Language.arabic? [IconButton(
// onPressed: toggleDrawer,
// icon: const Icon(
// Icons.menu,
// color: AppColors.primary,
// ),
// )]:[],
toolbarHeight: AppConstants.kDeviceHeight * 0.1,
centerTitle: true,
title: Container(
width: AppConstants.kDeviceHeight * 0.1,
height: AppConstants.kDeviceHeight * 0.1,
decoration: const BoxDecoration(
color: Colors.transparent,
image: DecorationImage(
image: AssetImage(
Assets.imagesSoofra,
),
)),
),
elevation: 0,
backgroundColor:Colors.yellow.shade600,
);
}
@override
Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
Here what i have Done and Tried
Review the Code and removed unnecessary elements such as Expanded for the Text in Movie Card Widget,
INTERNET permission is enabled in all Manifests
Flutter Clean,
Flutter
Flutter build APK --no-shrink
Flutter run --profile
- Added a print statement to get the names of the videos and invoked flutter run --release print result after running flutter run --release
Upvotes: 0
Views: 56