Flutter gesturedetector not working in stack widget - flutter

I am using the stack widget to show the back arrow button on an image. And its showing but the problem is it's not tappable mean Gesturededector is not working on Stack.
My code
Stack(
children: <Widget>[
Container(
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => print("first container"),
child: Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(left: width * 0.03),
padding: EdgeInsets.only(top: statusBarHeight * 2),
child: Icon(
Icons.arrow_back_ios,
size: 25,
color: Colors.white,
),
),
),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.3),
child: SingleChildScrollView(
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'NYC Food Festival',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.calendar_today,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'Sat, May 25, 2020',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.attach_money,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'25,000 PKR',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Snaps',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
child: Column(
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
],
)),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'About',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
padding: EdgeInsets.only(
right: width * 0.03, left: width * 0.03),
child: DescriptionTextWidget(
text:
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Included',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
],
),
),
),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
// color: Color.fromARGB(110, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(30, 255, 255, 255),
Color.fromARGB(255, 255, 255, 255),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: InkWell(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 80,
vertical: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.blueAccent,
),
child: Text(
"BOOK NOW",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
),
onTap: () {
return print("Tap");
},
),
),
),
),
],
)
I need to use it as a back button when I navigate but it's not working then for testing I just print a value onTap but its also not working I try to add behaviour also.

Can you try putting GestureDectector after SingleChildScrollView in a stack.
I guess SingleChildScrollView is lying above GestureDetector since it is a stack.
SingleChildScrollView(),
GestureDetector(),

Related

Positioned Widget is not scrolling even with all positional arguments

I would like to make some information of a Profile Page scrollable. For the layout I used a stack as a parent widget and filled it with Positioned Widgets. I filled the Positioned Widget with all positional arguments, which allowed me to scroll it when I placed it in the middle of the screen. It seems like the further down I push the widget, the smaller the area to scroll gets. Until the area kind of disappears.
The last Positioned Widget is the one I want to make scrollable. I also used it with fix numbers, which didn't help.
I am new to programming, so I hopefully could make my problem clear. Thanks in advance for helping me out.
Here is my code:
return Scaffold(
appBar: AppBar(
elevation: 2,
leading: BackButton(onPressed: () {
Navigator.pop(context,
MaterialPageRoute(builder: (context) => eventHomeScreen()));
}),
backgroundColor: Colors.teal,
title: Text('Leute', style: TextStyle(fontSize: 28)),
actions: [
IconButton(
iconSize: 26,
icon: Icon(Icons.chat),
tooltip: 'Chat-Anfrage schicken',
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => chatRequestSentScreen.withUser(user)));
},
)
],
),
body: Stack(
alignment: Alignment.bottomCenter,
clipBehavior: Clip.none,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * .35,
decoration: BoxDecoration(
image: DecorationImage(
image: user.getProfilePicture(),
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: -MediaQuery.of(context).size.height * 0.19,
child: Card(
color: Colors.teal.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
elevation: 0,
child: Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.26,
child: Column(
children: [
Text(
user.getFullName(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(user.getCurrentAge().toString() + " Jahre",
style: TextStyle(
fontSize: 22,
)),
Text('Zuletzt aktiv: Heute',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
)),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 20),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 5),
child: Text(user.getBio(),
maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
)),
),
SizedBox(
height: 50,
),
],
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.45,
left: 0.0,
right: 0.0,
bottom: -MediaQuery.of(context).size.height * 0.55,
child: Container(
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.4,
child:
Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 5),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: SharedScreenFeatures.getSports(
user.getSports()),
),
),
),
),
),
],
),
);
}
}```
You will be fine if you just wrap your container inside a SingleChildScrollView
The child widget inherits constraints from the parent. I added a parent container with height: double.infinity. Also the segment_two container I set a minimum height of 150 otherwise you will give pixel overflow. Be careful with your ratios on sizing.
class TestPositioned extends StatefulWidget {
TestPositioned({Key? key}) : super(key: key);
#override
State<TestPositioned> createState() => _TestPositionedState();
}
class _TestPositionedState extends State<TestPositioned> {
segment_one(BuildContext context)
{
return Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * .35,
decoration: BoxDecoration(
border:Border.all(color:Colors.grey)),
child:FittedBox(
fit:BoxFit.fitHeight,
child:SizedBox(
width:200,
height:200,
child: Image.asset("assets/images/apple.jpg"),
),
),
);
}
segment_two(BuildContext context)
{
return
Positioned(
bottom: -MediaQuery.of(context).size.height * 0.01,
child:
Container(
width: MediaQuery.of(context).size.width * 1,
height: MediaQuery.of(context).size.height * 0.26>150?MediaQuery.of(context).size.height * 0.26:150,
child:Card(
color: Colors.teal.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
elevation: 0,
child: Column(
children: [
Expanded(child:Text("full Name", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24, ),)),
Expanded(child:Text("current age" + " name",style: TextStyle(fontSize: 22,))),
Expanded(child:Text('abcdefg: hijklmn',style: TextStyle(color: Colors.grey,fontSize: 16,))),
SizedBox(height: 10,),
Container(margin: EdgeInsets.symmetric(horizontal: 10),
padding:EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child:
Expanded(child:Text("bio",maxLines: 3,overflow: TextOverflow.ellipsis,textAlign: TextAlign.center,
style: TextStyle( fontSize: 20,)))
)
,
SizedBox(height: 10,),
],
),
)));
}
#override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text("Stacked Position")),body:
Container(
height: double.infinity,child:Stack(
children: [
segment_one(context),
segment_two(context),
],)));
}
}
I solved it, which took me quite a while but now it is working perfectly for my purposes. I am still using the stack but to push the content down to where it is needed, I used a transparent container. Now the MediaQuery isn't negative anymore. Might not be the perfect answer, but it works.
return Scaffold(
backgroundColor: Colors.teal.shade50,
appBar: AppBar(
elevation: 2,
leading: BackButton(onPressed: () {
Navigator.pop(context,
MaterialPageRoute(builder: (context) => eventHomeScreen()));
}),
backgroundColor: Colors.teal,
title: Text('Leute', style: TextStyle(fontSize: 28)),
actions: [
IconButton(
iconSize: 26,
icon: Icon(Icons.chat),
tooltip: 'Chat-Anfrage schicken',
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => chatRequestSentScreen.withUser(user)));
},
)
],
),
body: Stack(
children: [
Column(children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .33,
decoration: BoxDecoration(
image: DecorationImage(
image: user.getProfilePicture(),
fit: BoxFit.cover,
),
),
),
]),
Positioned(
top: MediaQuery.of(context).size.height * .27,
child: Container(
decoration: BoxDecoration(
color: Colors.teal.shade50,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
width: MediaQuery.of(context).size.width * 1,
child: Column(
children: [
Text(
user.getFullName(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(user.getCurrentAge().toString() + " Jahre",
style: TextStyle(
fontSize: 22,
)),
Text('Zuletzt aktiv: Heute',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
)),
],
),
),
),
SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .39,
color: Colors.transparent,
),
Container(
height: MediaQuery.of(context).size.height * .15,
width: MediaQuery.of(context).size.width * 1,
color: Colors.teal.shade50,
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 0),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Text(
user.getBio(),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * .4,
width: MediaQuery.of(context).size.width *1 ,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
)),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children:
SharedScreenFeatures.getSports(user.getSports()),
),
),
),
),
],
),
),
],
),
);

Flutter SingleChildScrollView with a Column that has Expanded as a child

i am trying to make the home screen scrollable with SingleChildScrollView but reading other questions on Stackoverflow, it seems that Expanded causes problems. I am new to Flutter, so i am here to ask you if you know how could i fix this. I noticed that if i wrap the Column in a SingleChildScrollView widget it works without the Expanded widget, so that's the problem for sure. Do you know how could i replace the Expanded widget? I don't know what height it is going to have, since i am probably going to add more buttons.
Here there is the code:
return Scaffold(
body: Stack(
children: [
Container(
margin: EdgeInsets.symmetric(horizontal: size.width * 0.10),
child: Column(children: [
SizedBox(height: statusBarHeight), // spazio per statusbar
Align(
alignment: Alignment.topLeft,
child: Container(
margin: EdgeInsets.only(top: size.height * 0.04),
height: 20,
// color: Colors.orange,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.wb_sunny_sharp, size: 20, color: Color(0xff8276f4)),
SizedBox(width: 8), // Spazio laterale da icona
Text("MER 18 AGO", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Color(0xff8276f4),
),),
],)
),
),
Container(
margin: EdgeInsets.only(top: 15, bottom: 20),
width: size.width * 0.80,
decoration: BoxDecoration(
// color: Color(0xffaf8eff),
borderRadius: BorderRadius.circular(29.5)
),
child: Text("Ciao, Andrea!", style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 30,
color: Color(0xff2e3760),
),),
alignment: Alignment.centerLeft,
),
Container(
height: size.height * 0.30,
width: size.width * 0.80,
decoration: BoxDecoration(
color: Color(0xffdee0e3),
image: DecorationImage(
scale: 0.5,
image: AssetImage('assets/images/standing.png')
),
borderRadius: BorderRadius.circular(29.5)
),
),
SizedBox(height: 20),
Align(
alignment: Alignment.topLeft,
child: Container(
child: Text("Cosa vuoi fare oggi?", style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xff2e3760),
),),
),
),
Expanded(
child: Container(
// color: Colors.orange,
margin: EdgeInsets.only(top: 20),
child: GridView.count(
padding: EdgeInsets.all(0),
childAspectRatio: 0.8,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
children: <Widget>[
CategoryCard(
title: "Profilo",
numeroicona: 60307,
numerocolore: 0xFF8c7ffd,
),
CategoryCard(
title: "Università",
numeroicona: 58713,
numerocolore: 0xffb08dff,
),
CategoryCard(
title: "Idee",
numeroicona: 58235,
numerocolore: 0xFF1a88ff,
),
CategoryCard(
title: "Progetti",
numeroicona: 61080,
numerocolore: 0xFF4b5982,
),
],
crossAxisCount: 2),
),
),
],),
),
Now it will scroll like this
I used SliverToBoxAdapter on Column, then replaced GridView with SliverGrid.count. I'm making pr to the repo. After checking, let me know this is what you wanted?

How to Adjust container height according to the text height in flutter?

I am building a flutter application where I am trying to add a container and it's child text.
I want the container to take as much height as the text requires. But instead it takes the height specified.
Following is my code:
class ChangePassword extends StatefulWidget {
#override
_ChangePasswordState createState() =>
_ChangePasswordState();
}
class _ChangePasswordState extends State<ChangePassword> {
final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
key: _scaffoldkey,
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height * 0.23),
child: DrawerHeader(
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: [
Container(
height: MediaQuery.of(context).size.width * 0.1,
width: MediaQuery.of(context).size.width * 0.1,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).primaryColor,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(imageurl)),
boxShadow: [
BoxShadow(
blurRadius: 25,
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 10),
)
],
),
),
Container(
height: MediaQuery.of(context).size.width * 0.15,
width: MediaQuery.of(context).size.width * 0.5,
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
fontSize: 15,
color: Colors.lightBlue[900],
fontWeight: FontWeight.bold),
),
Text(email),
SizedBox(
height: 2,
),
Row(
children: [
Icon(
Icons.remove_red_eye_outlined,
size: 12,
),
Text(
'View Profile',
style: TextStyle(
fontSize: 12,
),
)
],
)
],
),
),
],
)),
decoration: BoxDecoration(
color: Colors.white,
),
),
),
],
),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.35,
child: Stack(children: [
Positioned(
height: MediaQuery.of(context).size.height * 0.23,
top: 0,
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Container(
color: Color(0xff002060),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
_scaffoldkey.currentState.openDrawer();
},
child: new Container(
child: Icon(
Icons.menu,
color: Colors.white,
size: MediaQuery.of(context).size.height *
0.04,
),
padding: new EdgeInsets.all(7.0),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Container(
height:
MediaQuery.of(context).size.height * 0.07,
child: Center(
child: Text(
'Profile',
style: TextStyle(
color: Colors.white,
),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Icon(
Icons.search,
color: Colors.white,
size: MediaQuery.of(context).size.height * 0.04,
),
],
),
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.16,
left: MediaQuery.of(context).size.width * 0.03,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.height * 0.14,
height: MediaQuery.of(context).size.height * 0.14,
decoration: ShapeDecoration(
shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(8.0),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f4ebe0c87612dab4f12a597%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D292%26cropX2%3D3684%26cropY1%3D592%26cropY2%3D3987',
))),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.05,
),
Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.08,
child: Text(
'Bill Gates',
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Calibri'),
),
),
],
)
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.fill,
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
]),
),
],
)),
],
),
));
}
Following is the image:
I want the container that contains the text below 'Bill Gates' to be wrapped according to the information entered there.
The whole container should decrease as I am planning to add widgets below this customised appbar, so is there any way I can achieve this?
I tried to use flexible but it did not work. Can someone help me with this please?
Use fitted box:-
FittedBox(
fit:BoxFit.fitHeight,
child:Text("Your text"),
),
Do not provide the height of the container and it will adjust automatically.
#Ankit,
Culprit:
As you mentioned, the Container widget is intended to take the width and height you explicitly specify, so it does what you tell it to do.
What you should have done in the above case is avoid specifying the height for that Container which contains the Text widget as follows.
Change this code section from:
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.fill,
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
To the following code, where I have removed specifying the height property of the container:
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.height,
child: Container(
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
By doing that, and wrapping the Container within a FittedBox, that varying text length Text widget will cause it to adjust its height accordingly.
Following part is important here:
child: FittedBox(
fit: BoxFit.height,

Can i add radius button in singlechild scroll view?

I am using Stack widget in which I have 2 widgets one is just an image and the other is Singlechildscrollview.
I need to add a button on the footer of the screen and fix this (not moveable). Need to be fixed on screen when the Singlechildscrollview scroll or not I need to fix this button. I am not sure how can I do this because if I out the button in Singlechildscrollview then it will show only when I scroll. I need to fix when I scroll or not button should appear.
Here is my code:
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: statusBarHeight * 0.8),
height: height * 0.4,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/place2.jpg',
),
fit: BoxFit.fill,
),
),
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(top: height * 0.3),
child: SingleChildScrollView(
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: height * 0.05,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'NYC Food Festival',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.calendar_today,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'Sat, May 25, 2020',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
Container(
margin: EdgeInsets.only(left: width * 0.03),
child: Row(
children: <Widget>[
Icon(
Icons.attach_money,
size: 20,
color: Color(0xff808080),
),
SizedBox(width: width * 0.02), // give it width
Column(
children: <Widget>[
Text(
'25,000 PKR',
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
fontSize: 15),
),
],
)
],
),
),
SizedBox(
height: height * 0.02,
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Snaps',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
child: Column(
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2.0,
enlargeCenterPage: true,
),
items: imageSliders,
),
],
)),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'About',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Container(
padding: EdgeInsets.only(
right: width * 0.03, left: width * 0.03),
child: DescriptionTextWidget(
text:
"Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.")
),
SizedBox(
height: height * 0.02,
),
Container(
width: width,
margin: EdgeInsets.only(left: width * 0.03),
child: Text(
'Included',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 25),
),
),
SizedBox(
height: height * 0.02,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
Included(),
SizedBox(
height: height * 0.01,
),
],
),
),
),
),
),
)
],
)
Here is the output of current view:
This is what I want:
You can achieve this look with relative ease.
Here is an example:
class BottomFadeButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text("Bottom Fade Button"),
),
body: Container(
// height: 500,
color: Colors.amberAccent,
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text("Hello "),
);
}),
),
// Bottom Button
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 100,
decoration: BoxDecoration(
// color: Color.fromARGB(110, 255, 255, 255),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(30, 255, 255, 255),
Color.fromARGB(255, 255, 255, 255),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Center(
child: InkWell(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 100,
vertical: 20,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.blueAccent,
),
child: Text(
"BUY TICKETS",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
),
onTap: () {
return print("Tap");
},
),
),
),
),
],
),
),
),
);
}
}
Output:
yes you can add the button in stack and then wrap with align widget with alignment.bottom_center

Flutter banner overlapping the screen

My banner is overlapping the slack widgets i need to show the ad on bottom or footer but problem is its overlapping the container need to know how can i add in end but not overlap the containers
Here is my code
body: Stack(
children: [
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 0);
},
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xffF9D342),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage1.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xffF9D342),
width: double.infinity,
),
Container(
color: Color(0xffF9D342),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: Text(
snapshot.data[index].would,
style: TextStyle(
color: Color(0xff292826),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
GestureDetector(
onTap: () {
percengtageTrigger();
API.voteplusQuestion(snapshot.data[index], 1);
},
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Color(0xff292826),
child: Column(
children: <Widget>[
shouldShow
? Container(
padding: const EdgeInsets.only(
top: 10, right: 10),
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment:
CrossAxisAlignment.end,
children: <Widget>[
Text(
'${percentage2.toStringAsFixed(0)}%',
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontFamily: 'NewsCycle',
),
),
],
))
: Container(
height: stackHeight * 0.1,
color: Color(0xff292826),
width: double.infinity,
),
Container(
color: Color(0xff292826),
height: stackHeight * 0.4,
width: double.infinity,
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 40),
child: Text(
snapshot.data[index].rather,
style: TextStyle(
color: Color(0xffF9D342),
fontSize: 23,
fontWeight: FontWeight.bold,
fontFamily: 'NewsCycle',
),
),
),
],
)),
],
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.015,
color: Colors.white,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Align(
alignment: Alignment.center,
child: GestureDetector(
onTap: () {
nextQuestion();
},
child: Text(
"SKIP",
style: TextStyle(
color: Colors.black,
fontFamily: 'FredokaOne',
fontSize: 27),
),
),
)),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
child: AdmobBanner(
adUnitId: getBannerAdUnitId(),
adSize: bannerSize,
),
),
),
],
));
As you see in the image it's overlapping the grey container I need a yellow and grey containers in same size but on top of banner no with overlap with banner.
If your content will be scrollable in the future, then I suggest you stick with the floating ad and maybe add a wide grey background to cover some space as I've seen some apps do.
Otherwise, assign it to a small row at the bottom (And assign the rest of the elements to rows as needed). The ad will take up a lot of space though so be sure to adjust the other elements accordingly.
Since you are using stack the children in the stack will overlap. If don't want them to overlap you can use other layout widgets such as Column or ListView according to your need. You can refer to flutter docs for more info on layout widgets.