Flutter Custom SideBar Not Taking Full Height - flutter

Question

I am working on a custom sidebar for my app since I dont like the default drawer that flutter comes with.
Everything works fine, that is, the sidebar takes the entire height of the mobile phone
until I render the page contents along the sidebar as shown below
Here's the Main contents code:
import 'package:api_example_app/LandingScreen/components/control_button.dart';
import 'package:api_example_app/LandingScreen/components/default_button.dart';
import 'package:api_example_app/SensorScreen/charts/GasChart.dart';
import 'package:api_example_app/SensorScreen/charts/HumChart.dart';
import 'package:api_example_app/SensorScreen/charts/MoisChart.dart';
import 'package:api_example_app/SensorScreen/charts/NurChart.dart';
import 'package:api_example_app/SensorScreen/charts/PhChart.dart';
import 'package:api_example_app/SensorScreen/charts/TemChart.dart';
import 'package:api_example_app/SensorScreen/charts/chartComponents/HumCard.dart';
import 'package:api_example_app/SensorScreen/components/sensor_screen.dart';
import 'package:api_example_app/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class LandingScreenBody extends StatefulWidget {
#override
_LandingScreenBodyState createState() => _LandingScreenBodyState();
}
class _LandingScreenBodyState extends State<LandingScreenBody> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Padding(
padding: EdgeInsets.symmetric(horizontal: size.width * 0.05),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(height: size.height * 0.1),
Center(
child: Text(
'ngDAQ',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 25,
),
),
),
SizedBox(height: size.height * 0.01),
Center(
child: Text(
'The ngDAQ is a Smart Agriculture solution based on IoT, seeking to increase farm productivity by automation and monitoring.',
textAlign: TextAlign.center,
style: TextStyle(color: kDarkGreyColor, fontSize: 12),
),
),
SizedBox(height: size.height * 0.05),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CardsParent(
size: size,
icon: FontAwesomeIcons.temperatureHigh,
title: 'Tem',
subtitle: '33C',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new TemChart()));
},
),
CardsParent(
size: size,
title: 'Hum ',
subtitle: '75%',
icon: FontAwesomeIcons.cloudShowersHeavy,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new HumChart()));
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CardsParent(
size: size,
icon: FontAwesomeIcons.hourglass,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new MoisChart()));
},
title: 'Mos',
subtitle: '40',
),
CardsParent(
size: size,
title: 'PH ',
subtitle: '14',
icon: FontAwesomeIcons.meteor,
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => new PhChart()));
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CardsParent(
size: size,
icon: FontAwesomeIcons.leaf,
title: 'Nur',
subtitle: 'Good',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new NurChart()));
},
),
CardsParent(
size: size,
title: 'Gas ',
subtitle: 'Good',
icon: FontAwesomeIcons.flask,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new GasChart()));
},
),
],
),
SizedBox(height: size.height * 0.05),
// DefaultButton(
// size: size,
// title: "Next",
// press: () {
// Navigator.push(
// context,
// CupertinoPageRoute(
// builder: (context) => SensorScreen(),
// ),
// );
// },
// ),
],
),
),
);
}
}
Heres' the Sidebar Code:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
// import 'package:rxdart/rxdart.dart';
import '../../constants.dart';
class SideBar extends StatefulWidget {
// const SideBar({Key ? key}) : super(key: key);
#override
_SideBarState createState() => _SideBarState();
}
class _SideBarState extends State<SideBar>
with SingleTickerProviderStateMixin<SideBar> {
AnimationController _animationController;
StreamController<bool> isSidebarOpenedStreamController;
Stream<bool> isSidebarOpenedStream;
StreamSink<bool> isSidebarOpenedSink;
// final bool isSidebarOpened = true;
final _animationDuration = const Duration(milliseconds: 500);
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: _animationDuration);
isSidebarOpenedStreamController = PublishSubject<bool>();
isSidebarOpenedStream = isSidebarOpenedStreamController.stream;
isSidebarOpenedSink = isSidebarOpenedStreamController.sink;
}
#override
void dispose() {
_animationController.dispose();
isSidebarOpenedStreamController.close();
isSidebarOpenedSink.close();
super.dispose();
}
void onIconPressed() {
final animationStatus = _animationController.status;
final isAnimationCompleted = animationStatus == AnimationStatus.completed;
if (isAnimationCompleted) {
isSidebarOpenedSink.add(false);
_animationController.reverse();
} else {
isSidebarOpenedSink.add(true);
_animationController.forward();
}
}
#override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return StreamBuilder<bool>(
initialData: false,
stream: isSidebarOpenedStream,
builder: (context, isSideBarOpenedAsync) {
return AnimatedPositioned(
duration: _animationDuration,
top: 0,
bottom: 0,
left: isSideBarOpenedAsync.data ? 0 : 0,
right: isSideBarOpenedAsync.data ? 0 : screenWidth - 45,
child: Row(
children: <Widget>[
Expanded(
child: Container(
color: kOrangeColor,
child: Column(
children: <Widget>[],
),
),
),
Align(
alignment: Alignment(0, -0.9),
child: GestureDetector(
onTap: () {
onIconPressed();
},
child: Container(
width: 35,
height: 80,
color: kOrangeColor,
alignment: Alignment.centerLeft,
child: AnimatedIcon(
progress: _animationController.view,
icon: AnimatedIcons.menu_close,
color: Colors.white,
size: 30,
),
),
),
),
],
),
);
},
);
}
}
The Layout Where the render is done:
import 'package:api_example_app/LandingScreen/components/body.dart';
import 'package:flutter/material.dart';
import '../../constants.dart';
import 'sidebar.dart';
class SideBarLayout extends StatelessWidget {
// const SideBarLayout({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
LandingScreenBody(),
SideBar(),
],
),
);
}
}
I dont know what I did wrong.

Answer 1

Inside SideBar, you need to surround it with Container widget, and set its height to double.infinity;
//Inside SideBar
return Container(
width: 200,
height: double.infinity,
child: StreamBuilder<bool> (
...
);
);

Answer 2

I solved it, thanks to #eyoeldefare.
From the main home, where I returned padding, I [return container instead, then, add:
return Container(
height: double.infinity,
(
...
),
);