I have read the flutter documentations and I have a specific widget behavior I need to implement. However I wasn't able to reproduce it. I would like to undock the floating action button in the bottom sheet. I thought it would be easy with the use of
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
Unfortunately it only works on the BottomNavigationBar
not in the BottomSheet
.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Text('loc'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
Scaffold.of(context).showBottomSheet((BuildContext context){
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
},
);
},
),
);
}
}
But my expected result should be the FAB is undocked/floating in the bottom sheet instead of being docked. I don't want to overwork myself for this behavior by making my own implementation of bottom sheet or via gesture widget as much as possible. But if its really necessary I would like some advice or answer in this regards. Thank you and advance.