The below screen with the scaffold, is causing the screen to go grey, there is no error as I have a custom widget to be showed when there is an error, but this is just grey screen, I have isolated the screen but the behaviour is still the same.
But the normal screen shows up when I am in debug mode or release mode and have connected the phone to my laptop with a cable, but this problem is only when I build the APK and install on my phone.
I have tried it an application but the problem remains the same, I use it along with go_router
in the application but the below code is from an isolated application.
I am not able to understand why the grey screen is being shown.
// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:test/shared/widget/buttons/primary_button.dart';
import 'package:test/shared/widget/text/text_title_large.dart';
import 'package:test/shared/widget/text/text_title_medium.dart';
import 'package:test/shared/widget/text/text_title_small.dart';
import 'package:test/shared/widget/ui/helper_sized_box.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
// import 'package:go_router/go_router.dart';
import 'package:sizer/sizer.dart';
import 'package:timeline_tile/timeline_tile.dart';
const timeLineData = [
{
"timeLine": "2 weekends",
"program": "Boot Camp",
"level": "1",
},
{
"timeLine": "4 weekends",
"program": "Market Segmentation/MVP/Customer Discovery",
"level": "2",
},
{
"timeLine": "2 weekends",
"program": "Pitch Deck Workshop",
"level": "3",
},
{
"timeLine": "Once a month",
"program": "Industrial Connect/Networking",
"level": "4",
},
{
"timeLine": "Once in 3 months",
"program": "Seed Funding & Product Showcase",
"level": "5",
},
{
"timeLine": "3 months",
"program": "90 Days Acceleration Workshops",
"level": "6",
},
];
class ScheduleScreen extends StatelessWidget {
const ScheduleScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: 100.h,
child: Stack(
children: [
// Positioned(
// child: SizedBox(
// width: 100.w,
// height: 100.h,
// child: Image.asset(
// "assets/images/BGs/home_bg.png",
// fit: BoxFit.cover,
// ),
// ),
// ),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SafeArea(
child: Padding(
padding: EdgeInsets.only(left: 4.w, top: 2.h),
child: TextTitleLarge(
"Our unique \nincubation timeline".toUpperCase(),
// textColor: colors(context).primary,
),
),
),
Divider(
thickness: 2,
// color: colors(context).secondary,
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PrimaryButton(
label: "Join Us",
width: 60.w,
variant: 2,
onPressed: () {
// context.pushNamed(
// Routes.onboarding,
// );
},
),
),
),
Divider(
thickness: 2,
// color: colors(context).secondary,
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 2.w,
),
child: ListView.builder(
itemBuilder: (context, index) {
return BootCampScheduleTimeline(
isFirst: index == 0,
isLast: index == timeLineData.length - 1,
level: timeLineData[index]["level"] ?? "",
program: timeLineData[index]["program"] ?? "",
time: timeLineData[index]["timeLine"] ?? "",
index: index,
);
},
itemCount: timeLineData.length,
)
.animate(
delay: const Duration(milliseconds: 500),
)
.fadeIn(duration: const Duration(seconds: 1)),
),
),
],
),
],
),
),
);
}
}
class BootCampScheduleTimeline extends StatelessWidget {
const BootCampScheduleTimeline({
Key? key,
required this.isFirst,
required this.isLast,
required this.level,
required this.program,
required this.time,
required this.index,
}) : super(key: key);
final bool isFirst;
final bool isLast;
final String level;
final String program;
final String time;
final int index;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 15.h,
child: TimelineTile(
isFirst: isFirst,
isLast: isLast,
beforeLineStyle: LineStyle(
// color: colors(context).secondary!,
),
alignment: TimelineAlign.manual,
lineXY: 0.4,
indicatorStyle: IndicatorStyle(
width: 42.sp,
height: 5.h,
// color: colors(context).accentSecondary!,
indicatorXY: 0.4,
drawGap: true,
indicator: TextTitleLarge(
"L$level",
// textColor: colors(context).primary,
),
),
endChild: SizedBox(
height: 10.h,
// width: 20.w,
child: CustomPaint(
painter: MyPainter(
color: Colors.blue
// index % 3 == 0
// ? colors(context).secondary!.withOpacity(0.8)
// : index % 2 == 0
// ? colors(context).accentSecondary!
// : colors(context).primary!,
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 4.w,
),
child: Row(
children: [
SizedBoxSeparator(
width: 4.w,
),
Expanded(
child: Center(
child: TextTitleSmall(
program,
alignment: TextAlign.center,
// textColor: index % 3 == 0
// ? colors(context).primary
// : index % 2 == 0
// ? colors(context).secondary
// : colors(context).accentPrimary,
),
),
),
],
),
),
),
),
startChild: Container(
padding: EdgeInsets.only(right: 2.w),
// alignment: Alignment.centerRight,
child: TextTitleMedium(
time,
fontWeight: 600,
// textColor: colors(context).primary,
),
),
),
);
}
}
class MyPainter extends CustomPainter {
final Color color;
MyPainter({
required this.color,
});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = 2;
final path = Path();
path.moveTo(size.width, size.height);
path.addPolygon([
Offset(0, size.height / 2),
Offset(
size.width / 10,
size.height * 2 / 5,
),
Offset(
size.width / 10,
size.height * 3 / 5,
),
], true);
path.close();
canvas.drawPath(path, paint);
final rect = Rect.fromPoints(
Offset(
size.width / 10,
size.height * 0,
),
Offset(
size.width * 1,
size.height * 1,
),
);
canvas.clipRect(
rect,
);
canvas.clipRRect(RRect.fromRectXY(rect, 8.sp, 8.sp));
canvas.drawColor(color, BlendMode.src);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
It was due to outdated sizer
package. They had migrated to a new package responsive_sizer
, which I wasn't aware of. So after migrating it to the new package it started working.