Flutter SingleChildScrollView with a Column that has Expanded as a child - flutter

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?

Related

How to dynamically adjust container size in flutter?

I am using a white container with height
height: MediaQuery.of(context).size.height
And I am adding several red containers in it. When the number of these inside containers is less, the scrolling works perfectly like this
But as I increase the number of containers inside the big container, scrolling kind of overflows the container, like this
One solution I found out was that if I increase the height of white container, i.e:-
height: MediaQuery.of(context).size.height*7
But it makes the app look ugly and would eventually fail when the number of red containers is further increased. How can I fix this issue?
Code for the Program:-
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Test(),
));
}
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(height: 60.0,),
Container(
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: ListView(
primary: false,
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(height: 20.0,),
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
Container(
height: 150,
color: Colors.red,
),
SizedBox(height: 20,),
],
)
],
),
),
],
),
),
],
),
),
),
),
);
}
}

Okay so after some suggestions from comments I myself found the solution.
Instead of using listview inside the white container, I removed it and wrapped the white container with SingleChildScrollView and also wrapped it with Flexible
Now the container automatically adjusts according to the amount of containers in it.
Fixed code:-
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
color: Colors.black,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Row(
children: <Widget>[
Text(
'TEST',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
SizedBox(
width: 10.0,
),
],
),
),
SizedBox(
height: 60.0,
),
//User INFO
SingleChildScrollView(
child: Flexible(
child: Container(
margin: EdgeInsets.only(
top: 180.0,
),
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
child: Padding(
padding: EdgeInsets.only(
left: 15.0,
right: 15.0,
top: 20.0,
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 30.0,
),
child: Column(
children: <Widget>[
//greeting text
Row(
children: <Widget>[
Expanded(
child: Center(
child: Text(
'TEST',
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
),
),
],
),
SizedBox(
height: 20.0,
),
//app work
Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
Container(
height: 150,
color: Colors.red,
),
SizedBox(
height: 20,
),
],
)
//add button
],
),
),
],
),
),
),
),
),
],
),
),
),
),
),
);
}
}

To achieve your desired layout try playing with padding value of this container
Container(padding: EdgeInsets.only(top: 35.0, ),
margin: EdgeInsets.only(top:180.0,),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Color(0xFFEEEEEE),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(75.0),
topRight: Radius.circular(75.0),
),
),
in my case i used padding: EdgeInsets.only(top: 35.0, ),
result

First, you need to get the correct screen height by reducing the extra top padding and appBar size (if that page contains appBar)
To do that simply add
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
title: Text(
"Hello"
),
backgroundColor: const Color(0xFF005898),
)),
Then add this to height
double screenHeight = MediaQuery.of(context).size.height -
50 -
MediaQuery.of(context).padding.top; // Top Screen Height - appbarHeight - Top Padding(That top status bar on every phone)
Then Everything is as same but, Before SingleChildScrollView add a sizedBox then provide screenHeight and width as per requirement then in the child add scrollView and the rest of the code

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 gesturedetector not working in stack widget

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(),

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.

Align items diagonally within it's parent in Flutter

I am trying to build a widget that is made out of 2 different components:
image
container with text
I could just make a vertical split between the image but my aim is to have the split diagonal with diagonal text align aswell (or that the items would align themselves with the diagonal).
I was able to achieve most of the part with this resource: Custom flutter widget shape, but I am having problems with aligning text diagonally with the parent line. It is shown like this
This is my code for now
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.centerLeft,
fit: BoxFit.fitHeight,
image: NetworkImage(
'https://media.sproutsocial.com/uploads/2014/02/Facebook-Campaign-Article-Main-Image2.png'),
),
),
),
ClipPath(
clipper: TrapeziumClipper(),
child: Container(
color: Colors.white,
padding: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Text('1'),
Text('2'),
Text('3'),
Text('4'),
Text('5'),
Text('6'),
],
crossAxisAlignment: CrossAxisAlignment.center,
),
width: double.infinity,
),
)
],
),
And this is my clipper line draw.
class TrapeziumClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
final path = Path();
path.moveTo(size.width, 0.0);
path.lineTo(size.width * 53 / 100, 0.0);
path.lineTo(size.width * 1 / 3, size.height);
path.lineTo(size.width, size.height);
path.close();
return path;
}
#override
bool shouldReclip(TrapeziumClipper oldClipper) => false;
}

So after trying out with CustomMultiChildLayout and much more other widgets I have come to the conclusion that there is really not any way around other than to have comlpicated "hacks".
The one simpeples for me was this:
Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.only(top: 15, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
width: (mediaQuery.size.width * 53 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 15,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'23. feb 2020',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
),
Text(
'21.00',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
)
],
),
),
SizedBox(
height: 5,
),
Container(
width: (mediaQuery.size.width * 57 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 20,
child: FittedBox(
alignment: Alignment.centerLeft,
fit: BoxFit.scaleDown,
child: Text(
'item title name',
style: TextStyle(
fontSize: 18,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.white),
),
),
),
SizedBox(
height: 5,
),
Container(
width: (mediaQuery.size.width * 61 / 100) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 15,
child: Text(
'address',
style: TextStyle(
fontSize: 11,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.lightGrey,
),
),
),
Expanded(
child: Container(),
),
Container(
width: (mediaQuery.size.width * 3.7 / 5) - mediaQuery.size.width * 0.14,
padding: EdgeInsets.only(right: 15),
height: 32,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'GOING',
style: TextStyle(
fontSize: 24,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.green,
),
),
Container(
alignment: Alignment.bottomRight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
AppIcons.guests,
size: 15,
color: AppColors.white,
),
SizedBox(
width: 15,
),
Text(
'24',
style: TextStyle(
fontSize: 20,
fontFamily: 'Red Hat Text',
fontWeight: FontWeight.bold,
color: AppColors.white),
),
],
),
)
],
),
),
Basically what I did was get the screensizes of the elements and then by simply testing, I calculated how much width can Container() take in order to stay in the trapezoid area. The only thing I am concerned about is the responsivness with larger/smaller devices, but I hope that it will work since it's based on mediaquery sizes and not fixed ones.