I am developing a mobile application with Flutter. The home page in the application looks different on the emulator on the computer and different on the phone.
Emulator:
My phone:
Why could this be? How can I solve it?
HomePage.dart:
Scaffold(
appBar: AppBar(
title: const Text(
"Ana Sayfa",
style: TextStyle(color: Colors.black),
),
actions: [
IconButton(
icon: const Icon(Icons.exit_to_app),
onPressed: () async {
await userDB.signOut();
},
)
],
),
body: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 10),
Row(
children: [
Text(
"Merhaba, ${name.length > 11 ? '${name.substring(0, 12)}...' : name}",
style: const TextStyle(
fontSize: 25,
color: textColorBlack,
),
),
const Spacer(),
IconButton(
icon: const Icon(Icons.person),
onPressed: () {
setState(() {
menuController.index.value = 4;
});
},
),
],
),
const SizedBox(height: 5),
Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: deepRed,
),
height: MediaQuery.of(context).size.height * 0.12,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: lightRed,
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Icon(
Icons.warning,
color: textColorWhite,
size: MediaQuery.of(context).size.height *
0.055,
),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.03),
const Center(
child: Flexible(
child: Text(
"Yardıma ihtiyacım var!",
style: TextStyle(
fontSize: 25,
color: textColorWhite,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
],
),
),
onTap: () async {},
),
),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(Icons.keyboard_arrow_right_outlined),
Text(
"Önemli Kaynaklar",
style: TextStyle(fontSize: 22),
),
],
),
const SizedBox(height: 6),
StreamBuilder(
stream: db.collection("blog").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const CircularProgressIndicator(
color: lightRed,
);
} else {
final List<Post> data = snapshot.data!.docs
.map((e) => Post.fromDocument(e))
.toList();
final List<Widget> carouselItems =
_buildCarouselItems(data.take(3).toList());
return data.isEmpty != true
? InkWell(
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: CarouselSlider(
items: carouselItems,
options: CarouselOptions(
height: 150,
viewportFraction: 1,
initialPage: carouselIndex,
enableInfiniteScroll: true,
reverse: true,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 3),
autoPlayAnimationDuration:
const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: false,
enlargeFactor: 0.3,
onPageChanged: (index, reason) {
setState(() {
carouselIndex = index;
});
},
scrollDirection: Axis.horizontal,
),
),
),
onTap: () {
Get.to(
const PostDetailPage(),
arguments: data[carouselIndex],
transition: Transition.cupertino,
);
},
)
: Container(
height: 150,
width: double.infinity,
color: backgroundGrey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.newspaper,
size: 60,
),
SizedBox(height: 5),
Text(
"İçerik Bulunamadı",
style: TextStyle(
fontSize: 26,
color: textColorBlack,
),
)
],
),
);
}
},
),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(Icons.keyboard_arrow_right_outlined),
Text(
"Hızlı erişim",
style: TextStyle(fontSize: 22),
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * 0.005),
Row(
children: [
FastAccessButton(
const Icon(Icons.broken_image),
"Son Depremler",
() {
menuController.index.value = 1;
},
),
SizedBox(width: MediaQuery.of(context).size.width * 0.02),
FastAccessButton(
const Icon(Icons.newspaper),
"İçerikler",
() {
menuController.index.value = 3;
},
),
],
),
const SizedBox(height: 8),
Row(
children: [
FastAccessButton(
const Icon(Icons.people),
"Kişilerim",
() {
menuController.index.value = 2;
},
),
SizedBox(width: MediaQuery.of(context).size.width * 0.02),
FastAccessButton(
const Icon(Icons.settings),
"Ayarlar",
() {
menuController.index.value = 4;
},
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(Icons.keyboard_arrow_right_outlined),
Text(
"En son 2 deprem",
style: TextStyle(fontSize: 22),
),
],
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.18,
child: FutureBuilder<List<Earthquake>>(
future: _quakesFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const SizedBox(
width: 150,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Center(
child: CircularProgressIndicator(
color: lightRed,
),
),
),
);
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
return ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context, int index) {
Earthquake item = snapshot.data![index];
return SizedBox(
height: 75,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35),
),
elevation: 3,
child: ListTile(
title: Text("${item.location} - ${item.time}"),
subtitle: Text("Büyüklük: ${item.magnitude}"),
trailing: InkWell(
onTap: () {
Get.to(const EarthquakeDetailPage(),
arguments: item);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: lightRed,
),
child: const Padding(
padding: EdgeInsets.all(7.0),
child: Icon(
Icons.keyboard_arrow_right,
size: 28,
color: textColorWhite,
),
),
),
),
),
),
);
},
);
} else {
return Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.signal_wifi_connected_no_internet_4,
size: 50,
),
SizedBox(height: 5),
Text(
"İnternet Yok",
style: TextStyle(fontSize: 25),
)
],
),
);
}
},
),
),
],
),
),
),
);
Thanks for help.
Error:
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.
Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets. The offending Flexible is currently placed inside a Center widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RichText ← Text ← Flexible ← Center ← Row ← DecoratedBox ← ConstrainedBox ← Container ← Listener ← RawGestureDetector ← ⋯
3
Answers
Wrap the Top Row inside
Flexible.First of all, nice that you are trying to make such a nice app! Then you need to clean up your code. Its too much in one script. Try to move every section to its own widget.
Then your error says, that you are using the Flex wrong.
It should look like:
If its not working, send me the new error code and i will try your come by my self.
I’m not sure if this is what causing your problem but
Flexibleneeds to be a direct child of theRowand this is what’s causing the error message you have. Your secondFlexibleis inside aCenterwhich is the incorrect usage. You can try swapping these 2 widgets, so instead ofdo