Flutter : image overflow - flutter

can i solve this overflow when import big image ?
I am working on an interface project only and I want to solve this problem when importing a large image
change this :
to this :
my code :
Scaffold(
backgroundColor: Color(0xff131517),
appBar : AppBar(),
body: SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
children: [
SizedBox(height: 10,),
Container(child: Image.file(_image! , fit: BoxFit.contain , width: MediaQuery.of(context).size.width,)),
Spacer(),
Container(
height: 85,
color:Color(0xff1e1f23),
child: Center(
child: ListView(
scrollDirection: Axis.horizontal,
children: [],
),
),
)
],
)
),
),

You need to constrain the height of the container the image is in (or of the image itself) like so:
Scaffold(
backgroundColor: Color(0xff131517),
appBar : AppBar(),
body: SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
children: [
SizedBox(height: 10,),
Container(
height: MediaQuery.of(context).size.height*0.9,
child: Image.file(
_image!,
fit: BoxFit.contain,
width: MediaQuery.of(context).size.width,
)
),
Spacer(),
Container(
height: 85,
color:Color(0xff1e1f23),
child: Center(
child: ListView(
scrollDirection: Axis.horizontal,
children: [],
),
),
)
],
)
),
),

Related

Align children with first child in Column

How can I align my widget to take the same width as ClipRect image?
Right now it overflows in my screen. Find attached how it is and how I desire my output would be.
Is it possible to center it within the red lines I drew?
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Flexible(
child: Column(
children: <Widget>[
ColumnWithMainChild(
mainChildKey: mainChildKey,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
imgparam,
width: 350,
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'Good with children: $param_good_children',
),
GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
)
],
),
Divider(),
Text(
'Good with children: $param_good_children',
),
],
),
),
),
],
),
]));
}
}
Do the following Changes
Set Padding to Parent column
Set width of NetworkImage to double.infinity
Wrap your Progress Bar with Flexible
Code:
Widget build(BuildContext context) {
final mainChildKey = GlobalKey();
return Scaffold(
appBar: AppBar(),
body: Padding( // Set Padding to Paren
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
"https://images.unsplash.com/photo-1474922651267-219b23864ae8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
width: double.infinity, // Set width of NetworkImage to double.infinity
height: 200,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 8, 0, 8),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
const Text(
'Good with children: 5',
),
Flexible( //Wrap your Progress Bar with Flexible
child: GFProgressBar(
width: 150,
percentage: 0.3,
backgroundColor: Colors.pink,
progressBarColor: Colors.red,
),
)
],
),
const Divider(),
const Text(
'Good with children: 5',
),
],
),
),
),
]),
),
);
}
Output:

Flutter: bottom widget when keyboard is displayed

It looks fine when the keyboard is hidden but when displayed the container is on top of it and it should be behind (not related to the content of the container):
SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
)
If you use Scaffold above your code, change it with Material widget, and the problem will gone. Just like this:
return Material(
child: SafeArea(
child: Stack(
children: [
Column(
children: <Widget>[
Expanded(child: child!),
Container(
color: Theme.of(context).primaryColorDark,
height: 90.0,
child: NativeAdWidget(),
),
],
),
],
),
),
);

Photo overflowed by infinite pixels

I am trying to attach a photo to the top of the screen, and extend it to the left and ride edges, but only go down 0.2.
This is the code I am using to do so
final logo = Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.white,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
"assets/SignUp_Photo.jpg",
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
],
),
);
However, using this code causes me to overflow the bottom by infinity pixels.
How can I rectify?
Calling logo as follows:
return Scaffold(
backgroundColor: Color(0xffffffff),
body: Form(
key: _formKey,
child: SingleChildScrollView(
padding: EdgeInsets.all(36),
child: Container(
height: mq.size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
logo,
text,
fields,
Padding(
padding: EdgeInsets.only(bottom: 150),
child: bottom,
),
],
),
),
),
),
);
}
}
mq size height is
final mq = MediaQuery.of(context);
You need to put Column directly under Singlechildscrollview and wrap your logo inside the container:
return Scaffold(
backgroundColor: Color(0xffffffff),
body: Form(
key: _formKey,
child: SingleChildScrollView(
padding: EdgeInsets.all(36),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: mq.size.height,
child: logo),
text,
fields,
Padding(
padding: EdgeInsets.only(bottom: 150),
child: bottom,
),
],
),
),
),
);
}
}
Wrap the image within a Container. And assign height and with to the Container
final logo =
Container(
height: MediaQuery.of(context).size.height * 0.2,
width: MediaQuery.of(context).size.width,
child: Image.asset(
"assets/SignUp_Photo.jpg",
fit: BoxFit.cover,
),
);
Calling logo as follows:
return Scaffold(
backgroundColor: Color(0xffffffff),
body: Form(
key: _formKey,
child: Container(
height: mq.size.height,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
logo,
text,
fields,
Padding(
padding: EdgeInsets.only(bottom: 150),
child: bottom,
),
],
),
),
),
),
);

How to prevent Flutter widgets resize When the keyboard appears?

When the keyboard appears, the Flutter widgets resize. How to prevent this without using
resizeToAvoidBottomInset : false,
if I make it false then I can't see the TextFormField because the keyboard been above it
so waht to do?
here is my code
return Scaffold(
// resizeToAvoidBottomInset : false,
body: Center(
child: Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/back_ui4.png',fit: BoxFit.fill,),
),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 0.7*MediaQuery.of(context).size.height,),
TextFormField()
],
),
),
],
),
),
);
return Scaffold(
body: SingleChildScrollView(
child : Center(
child: Stack(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/back_ui4.png',fit: BoxFit.fill,),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 0.7*MediaQuery.of(context).size.height,),
TextFormField()
],
),
),
],
),
),
);

Implemented flare animation and now animation and text both not showing up when running app

I am trying to run a flare animation in my flutter app but for some reason it is not showing up. I do not get linting/run time errors so I haven't been able to find out what is going wrong. Am I implementing this animation incorrectly or is there a problem with putting using "expanded" in a "container"?
#override
Widget build(BuildContext context) {
double deviceWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text('Let\'s Start Eating!'),
),
drawer: DrawerPage(),
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child:
FlareActor(
"assets/animations/finding-pizza.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animationName,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height/35,
),
Text(
"Got a question?",
style: Theme.of(context).textTheme.title.copyWith(fontSize: 0.1 * deviceWidth),
textAlign: TextAlign.center,
softWrap: true,
),
I think it's not necessary to wrap Column with Container and then again with Column.
Try this:
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Expanded(
child: FlareActor(
"assets/animations/finding-pizza.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animationName,
),
),
SizedBox(
height: MediaQuery.of(context).size.height / 35,
),
Text(
"Got a question?",
style: Theme.of(context)
.textTheme
.title
.copyWith(fontSize: 0.1 * deviceWidth),
textAlign: TextAlign.center,
softWrap: true,
),
],
),
)