Hi i am refactoring our code

and i has got some problems.

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),
    ],
  ),

so in need to put ,buildNextButton' bottom center but

  Align(
        alignment: Alignment.bottomCenter,
        child: buildNextButton(context),
      ),

didn't work

and also Spacer() too

is there any nice ways too align buildNextButton at the bottom

CodePudding user response：

 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,
          ),
        ),
      ],
    )
  ],
));

CodePudding user response：

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"))),
    );
  }
}



 

CodePudding user response：

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 -

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),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

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