How to center ElevatedButton in flutter?

Question

I imported [sliding up panel][2] from pub.dev and everything is good except for one issue. I'm looking for a way to center the 'blue circle' vertically. (in between 'red appbar' and 'buttom slider') I tried wraping the code with 'center' or using mainaxisalignment but it doesn't work. Other things I tried which I found on google just gave me an errors. Please help. Thanks in advance

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(200),
    child: AppBar(
      backgroundColor: Colors.pinkAccent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(100))
      ),
      flexibleSpace: Container(
        alignment: Alignment.center,
        child: Text(
          'Red AppBar',
          style: TextStyle(
              color: Colors.white,
              fontSize: 50.0,
              fontWeight: FontWeight.bold
          ),
        ),
      ),
    ),
  ),
  body: SlidingUpPanel(
    renderPanelSheet: false,
    panel: _floatingPanel(),
    collapsed: _floatingCollapsed(),
    body: ElevatedButton(
      onPressed: () {},
      child: Text('Blue Circle'),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(20),
      ),
    )
  ),
);

  Widget _floatingCollapsed() {
return Container(
  decoration: BoxDecoration(
    color: Colors.blueGrey,
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)),
  ),
  margin: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
  child: Center(
    child: Text(
      "buttom slider",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

}

  Widget _floatingPanel() {
return Container(
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(24.0)),
      boxShadow: [
        BoxShadow(
          blurRadius: 20.0,
          color: Colors.grey,
        ),
      ]
  ),
  margin: const EdgeInsets.all(24.0),
  child: Center(
    child: Text("LEVEL INFO"),
  ),
);

}

Also, what could be the best way to give margin to the 'blue circle' so it won't touch the far left and far right side of the screen?

Answer 1

As per the documentation of sliding_up_panel, the body represents the widget that lies underneath the sliding panel and it automatically sizes itself to fill the screen. So it occupies full screen. Since you expanded AppBar to 200 unit, the body Widget was pushed down, hence you are seeing the centre point also pushed down by 200 unit. If you change the body height to occupy full screen from the start, by setting the Scaffold property extendBodyBehindAppBar with true, you will place the widget in the correct centre point.

if you add the below line immediately after the Scaffold. You will get desired result.

return Scaffold(
   extendBodyBehindAppBar:true,

Answer 2

The SlidingUpPanel's body is using Stack, also getting full screen size. You can check

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: widget.slideDirection == SlideDirection.UP
        ? Alignment.bottomCenter
        : Alignment.topCenter,
    children: <Widget>[
      //make the back widget take up the entire back side
      widget.body != null
          ? AnimatedBuilder(
              animation: _ac,
              builder: (context, child) {
                return Positioned(
                  top: widget.parallaxEnabled ? _getParallax() : 0.0,
                  child: child ?? SizedBox(),
                );
              },
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: widget.body,
              ),
            )

You can play with Align on body and wrapping with SizedBox. You can use LayoutBuilder or MediaQuery to provide size.

body: SlidingUpPanel(
    renderPanelSheet: false,
    panel: _floatingPanel(),
    collapsed: _floatingCollapsed(),
    body: Align(
      alignment: Alignment(0.0, -.3), //play with it
      child: SizedBox(
        width: 200,
        height: 200,
        child: ElevatedButton(