Ad
Flutter Button Placed Below GridView Builder
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;
}
Ad
Answer
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: (){},
),
),
],
),
),
),
));
Ad
source: stackoverflow.com
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?
Ad