How to align bottom container inside listview? - flutter

Question

I wanted to aling a button to the bottom center of the listview.
Scaffold(
backgroundColor: Colors.white,
appBar: buildAppBar(context, ''),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
Spacer(),
buildNextButton(context),
],
),
I tried using Align, but it didn't work, and Spacer() didn't too:
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
is there any way to align buildNextButton to the bottom?

Answer 1

return Scaffold(
body: Stack(
children: [
Positioned(
bottom: 0,
width: MediaQuery.of(context).size.width,
child: Center(
child: MaterialButton(
child: Text("My button"),
onPressed: () {},
color: Colors.red,
),
),
),
ListView(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
)
],
));

Answer 2

You can use Scaffold Properties to make a button centre at the bottom. Hope it would be helpful for you,Thanks
import 'package:flutter/material.dart';
class BottomButton extends StatefulWidget {
const BottomButton({Key? key}) : super(key: key);
#override
_BottomButtonState createState() => _BottomButtonState();
}
class _BottomButtonState extends State<BottomButton> {
#override
Widget build(BuildContext context) {
return Scaffold(
///you can make the centre button use floating action Button and
provide its location
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: Text(
"Button")),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
appBar: AppBar(
title: Text("MyAppBar"),
),
body: ListView(
physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
///bottom sheet place button at bottom without using space
bottomSheet: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: TextButton(onPressed: () {}, child: Text("Button"))),
);
}
}

Answer 3

You can wrap your Align widget with Expanded and in Align widget use alignment: FractionalOffset.bottomCenter .
Please find below link to get more clear idea - Button at bottom

Answer 4

I suggest to wrap ListView and builtNextButton with Stack Widget.
Because when ListView children is bigger than screen height, button can not be located bottom.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget buildNextButton(context) {
return Container(height: 40, color: Colors.green);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.white,
//appBar: buildAppBar(context, ''),
body: Stack(
children: [
ListView(
physics: const ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: buildNextButton(context),
),
],
),
),
);
}
}

Answer 5

Now the only way you can use it in a list view is if you are to pas it in a column widget, so the order would become, column -> Expanded -> ListView andoutside the expanded, that is where you now pass the button. Just copy and paste my code here, Hopefully it works for you.
Scaffold(
body: Column(
children: [
Expanded(
child: ListView(
// physics: ClampingScrollPhysics(),
children: [
Column(
children: [
Text(
'check up',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
SizedBox(height: 12),
Text(
'SachsenwaldStr. 3. 12157 Berlin',
style: TextStyle(
fontSize: 20,
color: Colors.black,
),
),
],
),
// buildNextButton(context),
],
),
),
Container(
child: Center(
child: buildNextButton()
),
)
],
),
)
and then the buildNextButton code is
buildNextButton() {
return ElevatedButton(
style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20))
,
onPressed: () {},
child: const Text('Enabled'),
);
}
the moment you render a listview as aparent widget, automatically it renders all items in alist, one after the other.
anyquestions, am available to help you out
Good luck bro