Flutter how to Fix container on a top - flutter

Question

I don't use navbar in my app I have created a custom navbar but the issue is it's not fixed. mean when i scroll page navbar also scroll down. I need to fix it so it can be stick on top.
My code
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum BottomIcons { Home, Favorite, Search, Account }
class _HomeScreenState extends State<HomeScreen> {
double xOffset = 0;
double yOffset = 0;
double scaleFactor = 1;
bool isDrawerOpen = false;
int currentIndex = 0;
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
BottomIcons bottomIcons = BottomIcons.Home;
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
var bottomNavigationBar;
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(isDrawerOpen ? -0.5 : 0),
duration: Duration(milliseconds: 250),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
child: Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons:
bottomIcons == BottomIcons.Favorite ? true : false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons:
bottomIcons == BottomIcons.Search ? true : false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons:
bottomIcons == BottomIcons.Account ? true : false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Popular ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Categories',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/more.png"),
),
),
),
],
),
),
Container(
color: Color(0xffECF0F1),
padding: EdgeInsets.all(0),
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1.5,
mainAxisSpacing: 1.5,
crossAxisCount: 4,
),
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Computer Hardware',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat2.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Computer Software',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat3.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Internet', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat4.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Mobile / Table & iPad',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat5.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Printer & Scanner',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat6.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('CCTV Cameras', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat7.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Smart TV/Home Theater',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat8.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('E-Learning', textAlign: TextAlign.center)
],
),
),
],
),
),
SizedBox(
height: Height * 0.015,
),
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders,
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Service ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Deals',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/see.png"),
),
),
),
],
),
),
Container(
width: double.infinity,
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
enableInfiniteScroll: false,
viewportFraction: 0.7,
enlargeCenterPage: false,
height: Height * 0.21,
),
items: list
.map((item) => Container(
child: Image.asset(item),
))
.toList(),
)),
],
),
)));
}
}
This is my code I am using a simple column for the whole screen but the issue is in the column I need to fixed the container and scroll the other container.

Answer 1

The custom AppBar was a child of the SingleChildScrollView itself. Hence, it scrolled. Now, it is a child of a stack which persistently sticks to the top, hence won't scroll.
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
enum BottomIcons { Home, Favorite, Search, Account }
class _HomeScreenState extends State<HomeScreen> {
double xOffset = 0;
double yOffset = 0;
double scaleFactor = 1;
bool isDrawerOpen = false;
int currentIndex = 0;
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
BottomIcons bottomIcons = BottomIcons.Home;
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double Height = MediaQuery.of(context).size.height;
double Width = MediaQuery.of(context).size.width;
var bottomNavigationBar;
return AnimatedContainer(
transform: Matrix4.translationValues(xOffset, yOffset, 0)
..scale(scaleFactor)
..rotateY(isDrawerOpen ? -0.5 : 0),
duration: Duration(milliseconds: 250),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
child: Scaffold(
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons:
bottomIcons == BottomIcons.Favorite ? true : false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons:
bottomIcons == BottomIcons.Search ? true : false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons:
bottomIcons == BottomIcons.Account ? true : false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
body: Stack(
children: [
Positioned.fill(
child: SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Popular ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Categories',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/more.png"),
),
),
),
],
),
),
Container(
color: Color(0xffECF0F1),
padding: EdgeInsets.all(0),
child: GridView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1.5,
mainAxisSpacing: 1.5,
crossAxisCount: 4,
),
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat1.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Computer Hardware',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat2.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Computer Software',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat3.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Internet', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat4.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Mobile / Table & iPad',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat5.png'),
),
SizedBox(
height: Height * 0.008,
),
Text(
'Printer & Scanner',
textAlign: TextAlign.center,
)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat6.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('CCTV Cameras', textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat7.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('Smart TV/Home Theater',
textAlign: TextAlign.center)
],
),
),
Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: Height * 0.01,
),
Container(
height: Height * 0.04,
child: Image.asset('images/cat8.png'),
),
SizedBox(
height: Height * 0.008,
),
Text('E-Learning', textAlign: TextAlign.center)
],
),
),
],
),
),
SizedBox(
height: Height * 0.015,
),
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
aspectRatio: 2,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
items: imageSliders,
),
Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
RichText(
text: new TextSpan(
// Note: Styles for TextSpans must be explicitly defined.
// Child text spans will inherit styles from parent
style: new TextStyle(
fontSize: 14.0,
color: Colors.black,
),
children: <TextSpan>[
new TextSpan(
text: 'Service ',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22)),
new TextSpan(
text: 'Deals',
style: TextStyle(fontSize: 18)),
],
),
),
Container(
width: Width * 0.1,
height: Height * 0.05,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/see.png"),
),
),
),
],
),
),
Container(
width: double.infinity,
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
enableInfiniteScroll: false,
viewportFraction: 0.7,
enlargeCenterPage: false,
height: Height * 0.21,
),
items: list
.map((item) => Container(
child: Image.asset(item),
))
.toList(),
)),
],
),
),
),
Positioned(top: 0,left: 0, child: Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),),
],
)));
}
}