How to solve flutter page is not showing properly - flutter

Question

I am currently working on an E-Commerce app. I have made my Homepage which shows the available products and a HomeDetailPage which shows the details of a single product when a user clicks on a particular product. Now the problem is my entire app is working finely in my Pixel-5 Emulator but the HomeDetailPage is not Working in my actual device when I install the app in my personal phone. I am currently using Samsung A50 as my actual device I dont understand what is wrong in this code
Here is the Code For Homepage:-
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_application_1/pages/homedetal.dart';
import 'package:flutter_application_1/products.dart';
class Homepage extends StatefulWidget {
const Homepage({Key? key}) : super(key: key);
#override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
getdata() async {
var catalogdata = await rootBundle.loadString("assets/files/products.json");
var catalogjson = await jsonDecode(catalogdata);
var productdata = catalogjson["products"];
ProductsModel.productlist =
List.from(productdata).map<Item>((item) => Item.fromMap(item)).toList();
setState(() {});
}
#override
void initState() {
// TODO: implement initState
getdata();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
// key: ProductsModel.scaffoldKey,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(right: 32.0, left: 32.0, top: 32.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'TonyShop',
style: TextStyle(
fontSize: 45,
color: Colors.deepPurple,
fontWeight: FontWeight.bold),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, "/login");
},
icon: Icon(
Icons.arrow_forward,
color: Colors.deepPurple,
))
],
),
),
Padding(
padding:
const EdgeInsets.only(right: 32.0, left: 32.0, bottom: 32.0),
child: Text(
'Trending products',
style: TextStyle(
fontSize: 20,
color: Colors.deepPurple,
fontWeight: FontWeight.bold),
),
),
// SizedBox(
// height: 20,
// ),
Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
itemCount: ProductsModel.productlist.length,
itemBuilder: (context, index) {
final catalog = ProductsModel.productlist[index];
return Material(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
HomeDetailPage(singleitem: catalog),
));
},
child:
Itemwidget(item: ProductsModel.productlist[index])),
);
},
),
)
],
),
));
}
}
class Itemwidget extends StatefulWidget {
final Item item;
const Itemwidget({
Key? key,
required this.item,
}) : super(key: key);
#override
State<Itemwidget> createState() => _ItemwidgetState();
}
class _ItemwidgetState extends State<Itemwidget> {
#override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 255, 255, 255),
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
height: 120,
width: 120,
child: Hero(
tag: Key(widget.item.id.toString()),
child: Image.network(widget.item.image)),
),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Container(
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.name,
style: TextStyle(
fontSize: 17, fontWeight: FontWeight.bold),
),
Container(
child: Text(
widget.item.desc,
style: TextStyle(
fontSize: 12, fontWeight: FontWeight.normal),
),
width: 150,
),
SizedBox(
height: 10,
),
ButtonBar(
buttonPadding: EdgeInsets.all(0.0),
alignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.item.price.toString(),
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomeDetailPage(
singleitem: widget.item)));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Color.fromRGBO(
0,
0,
0,
1,
)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(16.0)))),
child: Text(
"Buy",
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
)
],
)
],
),
),
)
],
),
),
),
),
);
}
}
And Here is my Code for HomeDetailPage:-
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_application_1/pages/home.dart';
import 'package:flutter_application_1/products.dart';
class HomeDetailPage extends StatefulWidget {
const HomeDetailPage({
Key? key,
required this.singleitem,
}) : super(key: key);
final Item singleitem;
#override
State<HomeDetailPage> createState() => _HomeDetailPageState();
}
class _HomeDetailPageState extends State<HomeDetailPage> {
Future<bool> _previousroute() {
// important trick to handle backbutton press;
return Future(() => Navigator.canPop(context));
}
#override
Widget build(BuildContext context) {
// Variables for getting the height and width of the screen
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return WillPopScope(
onWillPop: () => _previousroute(),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
shadowColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
)),
// key: ProductsModel.scaffoldKey,
body: Container(
height: h,
child: Flexible(
fit: FlexFit.tight,
child: SingleChildScrollView(
padding: EdgeInsets.all(0.0),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipPath(
clipper: Clipper(),
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 240, 240, 245),
),
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Hero(
tag: Key(widget.singleitem.id.toString()),
child: Image.network(widget.singleitem.image)),
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
widget.singleitem.name,
style: TextStyle(
color: Colors.black,
fontSize: 30,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
widget.singleitem.desc,
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.normal),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(left: 4.0, right: 4.0),
child: Container(
width: w,
// box decoration does not work with button
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(32.0)),
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return Container(
child: AlertDialog(
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Your Order Is On The Way",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
// Used to create ok button
Navigator.of(context).pop();
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(
Color.fromRGBO(
0,
0,
0,
1,
)),
shape: MaterialStateProperty
.all(RoundedRectangleBorder(
borderRadius:
BorderRadius
.circular(
16.0)))),
child: Text(
"Ok",
style: TextStyle(
fontSize: 20,
fontWeight:
FontWeight.bold),
),
),
)
],
)
],
));
});
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Color.fromRGBO(
0,
0,
0,
1,
)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
))),
child: Text(
"Buy",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
),
),
),
),
)
],
),
),
),
),
),
);
}
}
class Clipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
// TODO: implement getClip
var path = new Path();
// fixed or unchanged points of the container
path.lineTo(0, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height - 20);
path.quadraticBezierTo(
//point creating the curve radius
size.width / 2,
size.height + 20,
// starting point of the curve
0,
size.height - 20);
return path;
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
// TODO: implement shouldReclip
return false;
}
}
Here is my Products model class
import 'package:flutter/material.dart';
class ProductsModel {
static List productlist = [];
static final GlobalKey<ScaffoldState> scaffoldKey =
GlobalKey<ScaffoldState>();
}
class Item {
late final int id;
late final String name;
late final String desc;
late final int price;
late final String color;
late final String image;
Item({
required this.id,
required this.name,
required this.desc,
required this.price,
required this.color,
required this.image,
});
factory Item.fromMap(map) {
return Item(
id: map["id"],
name: map["name"],
desc: map["desc"],
price: map["price"],
color: map["color"],
image: map["image"]);
}
}
In case that if you want to try this yourself Here is my dummy product.json file code for you:-
{
"products": [
{
"id": 1,
"name": "iPhone 12 Pro",
"desc": "Apple iPhone 12th generation",
"price": 999,
"color": "#33505a",
"image": "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-12-pro-blue-hero?wid=940&hei=1112&fmt=png-alpha&qlt=80&.v=1604021661000"
},
{
"id": 2,
"name": "Pixel 5",
"desc": "Google Pixel phone 5th generation",
"price": 699,
"color": "#00ac51",
"image": "https://www.telstra.com.au/content/dam/tcom/lego/2020/plans-devices/mobiles/google-pixel-5/shared-google-pixel-5-black-05-900x1200.png"
},
{
"id": 3,
"name": "M1 Macbook Air",
"desc": "Apple Macbook air with apple silicon",
"price": 1099,
"color": "#e0bfae",
"image": "https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP825/macbookair.png"
},
{
"id": 4,
"name": "Playstation 5",
"desc": "Sony Playstation 5th generation",
"price": 500,
"color": "#544ee4",
"image": "https://i1.wp.com/freepngimages.com/wp-content/uploads/2020/07/Playstation-5-games-console-transparent-background-png-image.png?fit=1000%2C1000"
},
{
"id": 5,
"name": "Airpods Pro",
"desc": "Apple Aipods Pro 1st generation",
"price": 200,
"color": "#e3e4e9",
"image": "https://crdms.images.consumerreports.org/c_lfill,w_598/prod/products/cr/models/400116-wireless-portable-headphones-apple-airpods-pro-10009323.png"
},
{
"id": 6,
"name": "iPad Pro",
"desc": "Apple iPad Pro 2020 edition",
"price": 799,
"color": "#f73984",
"image": "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/ipad-pro-12-select-wifi-silver-202003_FMT_WHH?wid=940&hei=1112&fmt=png-alpha&qlt=80&.v=1583551131102"
},
{
"id": 7,
"name": "Galaxy S21 Ultra",
"desc": "Samsung Galaxy S21 Ultra 2021 edition",
"price": 1299,
"color": "#1c1c1c",
"image": "https://lh3.googleusercontent.com/qRQPjHrhRVIs-xnfNSyiPXOH2vH97ylMacgbTKebqJtRfNH3LlYo8pN-5igsLDWUH62tGl5zNpTsl5xd8SprzGmXoCEmWFOi2-2cQVGS-r3PaRXHt62DmJHq-jrYX0UQvWZ9BA=s800-c"
},
{
"id": 8,
"name": "Galaxy S21",
"desc": "Samsung Galaxy S21 2021 edition",
"price": 899,
"color": "#7c95eb",
"image": "https://images.samsung.com/is/image/samsung/p6pim/za/galaxy-s21/gallery/za-clear-cover-galaxy-s21-5g-ef-qg991ttegww-363168624?$720_576_PNG$"
}
]
}
In my emulator it looks like this Emulator Image
In my Device it looks like this Device Image

Answer 1

It's because of expanded widget in HomeDetailsScreen, you can use Flexible instead of expanded like that:
Flexible(
fit: FlexFit.tight,
child: ...,
);