Flutter Button Placed below GridView Builder - flutter

Question

I want to have a big long button below the Gridview just like the logout button in the Roblox app
I manage to create a gridview and button using the Column , however the button is floating above the gridview, how to make it placed nicely below the gridview without floating above the gridview?
Here is my code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: MainMenuBody(),
),
);
}
}
class MainMenuBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
final List<MenuData> menu = [
MenuData(Icons.move_to_inbox_outlined, 'Menu 1'),
MenuData(Icons.find_in_page_outlined, 'Menu 2'),
MenuData(Icons.find_in_page_outlined, 'Menu 3'),
MenuData(Icons.upgrade_outlined, 'Menu 4'),
MenuData(Icons.upgrade_outlined, 'Menu 5'),
MenuData(Icons.play_for_work_outlined, 'Menu 6'),
MenuData(Icons.play_for_work_outlined, 'Menu 7'),
MenuData(Icons.assignment_turned_in_outlined, 'Menu 8'),
MenuData(Icons.assignment_turned_in_outlined, 'Menu 9'),
MenuData(Icons.fact_check_outlined, 'Menu 10')
];
return Container(
child: Scrollbar(
thickness: 3,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: SingleChildScrollView(
child: Column(
children: [
GridView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemCount: menu.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 0.2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
menu[index].icon,
size: 30,
),
SizedBox(height: 20),
Text(
menu[index].title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.black87),
)
],
),
),
);
},
),
Center(
child: RaisedButton(
child: Text("Button"),
onPressed: (){},
),
),
],
),
),
),
));
}
}
class MenuData {
MenuData(this.icon, this.title);
final IconData icon;
final String title;
}

Answer 1

I have modified your code a little bit. Please have a look.
Wrap the column inside a SingleChildScrollView, Remove Expanded widget and add shrinkWrap: true inside GridView
return Container(
child: Scrollbar(
thickness: 3,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [
GridView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemCount: menu.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1,
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 0.2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
menu[index].icon,
size: 30,
),
SizedBox(height: 20),
Text(
menu[index].title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10,
color: Colors.black87),
)
],
),
),
);
},
),
Center(
child: RaisedButton(
child: Text("Button"),
onPressed: (){},
),
),
],
),
),
),
));

Answer 2

Update: Not sure if this is in general the way to go, but you could create a scrollview wrapping the column wrapping gridview and the button. In grid view you then have to disable scrolling with physics: new NeverScrollableScrollPhysics().
But maybe columns and rows are the way to go for this