#flutter #dart #widget
#flutter #dart #виджет
Вопрос:
Следующий код flutter отлично работает на экране размером 6 дюймов, но всякий раз, когда он запускается на устройстве с диагональю менее 6 дюймов, он отображается с переполнением на XYZ пиксель.. Как я могу это исправить или есть ли какой-либо виджет для исправления этого. Я добавил ширину контейнера в качестве ширины экрана с помощью медиа-запроса, но все равно его отображение переполнено на меньшем устройстве
Это мой код
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/services.dart';
import 'package:kartofill/Homepagewithprice/Homepagewithprice.dart';
import 'package:kartofill/Navigatorpage.dart';
import 'package:fluttertoast/fluttertoast.dart';
dynamic totalCartValue =0;
class Cartpage extends StatefulWidget {
@override
_CartpageState createState() => _CartpageState();
}
class _CartpageState extends State<Cartpage> {
String phoneNumber;
final myController = TextEditingController(); ///Alert Dialog box input text myController will be use to store the number of qty
String id;
var qty;
var price;
var total;
bool qtyUpdated= false;
Future<String> getCartTotal() async {
totalCartValue = 0;
final fireBase = await FirebaseAuth.instance.currentUser();
print(fireBase.phoneNumber);
QuerySnapshot snapshot = await Firestore.instance
.collection('users').document(fireBase.phoneNumber)
.collection('cart').getDocuments();
snapshot.documents.forEach((doc) {
print(doc.data['total'].toString());
setState((){
totalCartValue = doc.data['total'];
});
});
return totalCartValue.toString();
}
@override
void initState() {
// TODO: implement initState
super.initState();
getCurrentUser();
print("Hi $phoneNumber");
getCartTotal();
print("Hi $totalCartValue");
}
getCurrentUser() async{
final firebaseUser = await FirebaseAuth.instance.currentUser();
setState(() {
phoneNumber = firebaseUser.phoneNumber;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home:Scaffold(
bottomNavigationBar:
StreamBuilder(
stream: Firestore.instance.collection('users').document(phoneNumber)
.collection('cart').snapshots(),
builder: (context, snapshot) {
if(snapshot.hasData) {
if(snapshot.data.documents.length!=0){
return new Container( //// Bottom Naviagtion Bar for check out and Total price
color: Colors.white,
child: Row(
children: <Widget>[
Checkoutclass(),
Expanded(
child: ListTile(
title: Text('Total'),
subtitle: Text(totalCartValue.toStringAsFixed(2)),
),
)
],
),
);}
else return Container(
height: 100,
);
}
else{
return Text('Loading');
}
}
),
appBar: AppBar(
leading: IconButton(icon: Icon(Icons.arrow_back),
onPressed: (){
Navigator.pop(context);
}),
title: Text('Kart-Ofill'),
backgroundColor: Colors.red,
),
body: Container(
width: MediaQuery.of(context).size.width,
child: StreamBuilder(
stream: Firestore.instance.collection('users').document(phoneNumber)
.collection('cart').snapshots(),
builder: (context, snapshot){
if(snapshot.hasData){
if(snapshot.data.documents.length!=0) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot doc = snapshot.data.documents[index];
return Container(
height: 200,
child: Card(
child: Row(
children: <Widget>[
Card(child: Image.network(
doc['img'], height: 100, width: 100,),
elevation: 10,
),
Column(
children: <Widget>[
Container(
height: MediaQuery
.of(context)
.size
.height / 15,
width: MediaQuery
.of(context)
.size
.width / 1.5,
color: Colors.white,
child: Text(doc['description'] "Rs "
doc['price'].toStringAsFixed(2),
style: TextStyle(fontSize: 15),)),
Center(child: Text(
'Rs ' doc['total'].toStringAsFixed(2))),
Row(
children: <Widget>[
RaisedButton(
color: Colors.grey,
onPressed: () {
showDialog(context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Dialog(
child: Container(
height: 250,
color: Colors.white10,
child: Container(
margin: EdgeInsets.all(40.0),
child: Column(
children: <Widget>[
TextField(
inputFormatters: [
new BlacklistingTextInputFormatter(
new RegExp(
'[\.|\,|\-|\ ]'))
],
controller: myController,
keyboardType: TextInputType
.number,
decoration: InputDecoration(
hintText: 'Enter the Quantity'),
),
Container(
height: 50,
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets
.all(8.0),
child: RaisedButton(
child: Text(
'Close',
style: TextStyle(
color: Colors
.white),),
color: Colors.red,
onPressed: () {
Navigator.pop(
context);
myController
.clear();
},
),
),
SizedBox(width: 25,),
RaisedButton(
color: Colors.red,
child: Text(
'Submit',
style: TextStyle(
color: Colors
.white),),
onPressed: () async {
qty = myController
.text;
if (int.parse(
qty) > 0 amp;amp;
int.parse(
qty) >=
5 amp;amp;
int.parse(
qty) <=
25) {
setState(() {
qtyUpdated =
true;
totalCartValue =
0;
});
CollectionReference col = Firestore
.instance
.collection(
'users')
.document(
phoneNumber)
.collection(
'cart');
QuerySnapshot querySnapshot = await col
.getDocuments();
querySnapshot
.documents[index]
.reference
.updateData(
{
"quantity": qty
});
price =
doc['price'];
total =
int.parse(
qty) *
price;
querySnapshot
.documents[index]
.reference
.updateData(
{
"total": total
});
//================///====================//
QuerySnapshot snapshot = await Firestore
.instance
.collection(
'users')
.document(
phoneNumber)
.collection(
'cart')
.getDocuments();
if (qtyUpdated) {
snapshot
.documents
.forEach((
doc) {
setState(() {
totalCartValue =
doc
.data['total'];
qtyUpdated =
false;
});
});
}
print(
myController
.toString());
Navigator.of(
context)
.pop();
Fluttertoast
.showToast(
msg: "Quantity Updated",
toastLength: Toast
.LENGTH_LONG,
gravity: ToastGravity
.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors
.red,
textColor: Colors
.white,
fontSize: 16.0
);
myController
.clear();
}
else
if (int.parse(
qty) < 5 ||
int.parse(
qty) <
0) {
Fluttertoast
.showToast(
msg: "Minimum 5 quantites",
toastLength: Toast
.LENGTH_SHORT,
gravity: ToastGravity
.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors
.red,
textColor: Colors
.white,
fontSize: 16.0
);
myController
.clear();
}
else
if (int.parse(
qty) > 25) {
Fluttertoast
.showToast(
msg: "Maximun 25 quantites",
toastLength: Toast
.LENGTH_SHORT,
gravity: ToastGravity
.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors
.red,
textColor: Colors
.white,
fontSize: 16.0
);
myController
.clear();
}
},
),
],
)
],
),
),
),
);
});
},
child: Text('Add Quanity'),
),
SizedBox(
width: 60,
),
RaisedButton(
child: Text('Delete'),
onPressed: () async {
CollectionReference col = Firestore
.instance.collection('users')
.document(phoneNumber).collection(
'cart');
QuerySnapshot querySnapshot = await col
.getDocuments();
querySnapshot
.documents[index]
.reference
.delete();
getCartTotal();
Fluttertoast.showToast(
msg: "Item Deleted",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
},
),
],
),
Padding(
padding: const EdgeInsets.only(right: 150),
child: Text(doc['quantity'].toString()),
)
],
),
],
),
),
);
},
);
}
else {
return Noitems();
}
}
else{
return Text ('Loading Kart Details...');
}
},
),
),
),
);
}
}
class Checkoutclass extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
child: MaterialButton(onPressed:() {
print("CheckoutClass");
//====Navigator=======//
/* Navigator.push(context, MaterialPageRoute(builder: (context)=>CheckoutScreen(totalQuantity:totalCartValue)));
*/
},
child: Text("Check Out",style: TextStyle(color: Colors.white),),
color: Colors.red,) ,
);
}
}
class Noitems extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.hourglass_empty,size: 100,),
SizedBox(height: 20,),
Text('Your cart is empty',style: TextStyle(fontSize: 25),),
SizedBox(height: 20,),
RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>Homepagewithprice()));
},
color:Colors.red,
child:Text('Browse Products',style: TextStyle(color: Colors.white),)
)
],
),
),
),
),
);
}
}
Комментарии:
1. Ваш код очень длинный. Не могли бы вы показать только те части, которые переполнены? Кстати, старайтесь не использовать контейнеры с фиксированными размерами. Вместо этого используйте Expanded со свойствами flex.
2. Пожалуйста, просто скопируйте свой код там, где существует проблема, это упростит нам помощь, вместо того, чтобы копировать и вставлять весь ваш код, что затрудняет нашу помощь. И добавьте скриншот для лучшего понимания того, с чем вы столкнулись. Вот несколько примеров того, как вы используете mediaQuery :
MediaQuery.of(context).size.width * 0.1. Это в основном 10% ширины экрана, потому что вы умножаете его на 0,1, вы можете изменить его на все, что захотите.