flutter bottomsheet with overlay button on top - flutter

Question

Can someone give guidance on how to create a bottomsheet with a button on top like below?
I think typically we should be able to achieve it using a stack widget. But not sure how to do this with a bottomsheet. Thanks for your help.

Answer 1

Here is code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bottom Sheet app',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo '),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(child: Text("Body"),),
bottomSheet:getBottomSheet() , //Main Center
); //Scaffold
}
Widget getBottomSheet(){
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Stack(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 8.0, right: 8.0),
child: Card(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
shrinkWrap: true,
children: [
Padding(
padding: const EdgeInsets.only(top:20.0),
child: SizedBox(height: 50, child: Text("Postpone Start")),
),
SizedBox(height: 50, child: Text("Postpone Start")),
SizedBox(height: 50, child: Text("Postpone Start")),
],),
),
),
),
Row(
children: [
Card(
color: Colors.orange,
child: FlatButton(onPressed: (){}, child: Text("Header"))),
],
),
],
),
],
);
}
}