Making a widget go over another with animating [closed] - flutter

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm new with Flutter and need some help. I used to build apps with Phonegap, but they've stoped delivering their services.
I'm facing a problem with the following: I'm trying to create a container with a button in it. When pushing the button the container must fill (animate) the screen in 1 second.
So it has to be filled untill the bottom bar, it must not go over the bottom.
See example: the container (orange) which is under the other container (green), is a list view.
I've tried using several widgets (Column, ListView, Container) yet no result. Could someone help me out with this? Which widget should I use? Any advise is welcome.
example

Answer 1

You can achieve given example like this:
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
double unexpandedTileHeight = 200.0;
bool isExpandedMode = false;
int _bottomNavIndex = 0;
final double initialUnexpandedTileHeight = 200.0;
final double roundedButtonSize = 48.0;
final double bottomBarSize = 64.0;
AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 450));
}
#override
void dispose() {
_animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
MainPage(),
AnimatedPositioned(
duration: Duration(milliseconds: 200),
top: unexpandedTileHeight,
left: 0,
right: 0,
bottom: 0,
child: OverlayPage(),
),
AnimatedPositioned(
duration: Duration(milliseconds: 200),
left: MediaQuery.of(context).size.width / 2 -
roundedButtonSize / 2,
top: unexpandedTileHeight -
(isExpandedMode
? roundedButtonSize + 4
: roundedButtonSize / 2),
child: RawMaterialButton(
fillColor: Colors.white,
constraints: BoxConstraints.tightFor(
width: roundedButtonSize, height: roundedButtonSize),
onPressed: () {
isExpandedMode
? setState(() {
isExpandedMode = false;
unexpandedTileHeight = initialUnexpandedTileHeight;
_animationController.reverse();
})
: setState(() {
isExpandedMode = true;
var mediaQueryData = MediaQuery.of(context);
unexpandedTileHeight = mediaQueryData.size.height -
bottomBarSize -
mediaQueryData.padding.top -
mediaQueryData.padding.bottom;
_animationController.forward();
});
},
shape: StadiumBorder(),
child: AnimatedIcon(
icon: AnimatedIcons.list_view,
progress: _animationController,
),
))
],
),
),
bottomNavigationBar: SizedBox(
height: bottomBarSize,
child: BottomNavigationBar(
backgroundColor: Colors.white,
currentIndex: _bottomNavIndex,
onTap: (index) => setState(() {
_bottomNavIndex = index;
}),
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.radio),
label: 'Radio',
),
],
),
),
);
}
}
class OverlayPage extends StatelessWidget {
const OverlayPage({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.orange,
);
}
}
class MainPage extends StatelessWidget {
const MainPage({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
),
color: Colors.green,
child: Column(
children: [
SizedBox(height: 16),
Text('bla bla bla'),
SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.photo,
size: 56,
),
SizedBox(width: 24),
Text(
'bla bla bla',
style: TextStyle(fontSize: 18),
),
],
),
SizedBox(height: 100),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'dasdadasds',
style: TextStyle(fontSize: 18),
),
Text(
'fdsfsdf',
style: TextStyle(fontSize: 18),
),
],
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'dasdadasds',
style: TextStyle(fontSize: 18),
),
Text(
'fdsfsdf',
style: TextStyle(fontSize: 18),
),
],
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'dasdadasds',
style: TextStyle(fontSize: 18),
),
Text(
'fdsfsdf',
style: TextStyle(fontSize: 18),
),
],
),
SizedBox(height: 16),
],
),
);
}
}