How to close a bottom sheet? #157
Description
I have a BottomSheet. i need to close the bottomsheet. So we tried implementing the 'swipe down on the tip of the bottom sheet' gesture but calculating the place of the "bar tip".
val element1: WebElement = driver.findElement(FlutterBy.key("bottom_sheet_close_icon")) // the scrollable container
// Get attributes (includes rect)
var attr: String? = element1.getAttribute("all")
// Replace single quotes with double quotes (quick fix)
attr = attr?.replace("'", "\"")
println("attr : $attr")
// Extract Rect.fromLTRB(left, top, right, bottom)
val pattern = Pattern
.compile("rect=Rect\\.fromLTRB\\((\\d+\\.?\\d*), (\\d+\\.?\\d*), (\\d+\\.?\\d*), (\\d+\\.?\\d*)\\)")
val matcher = pattern.matcher(attr)
println(matcher.toString())
Thread.sleep(3000)
// Get screen height
val screenHeight = driver.manage().window().size.height
if (matcher.find()) {
val left = matcher.group(1).toDouble()
val top = matcher.group(2).toDouble()
val right = matcher.group(3).toDouble()
val bottom = matcher.group(4).toDouble()
// Calculate center of source element
val centerX = ((left + right) / 2).toInt()
val centerY = ((top + bottom) / 2).toInt()
// Define drop target near bottom of screen
val dropY = (screenHeight * 0.9).toInt() // 90% down the screen
// Create W3C PointerInput for drag gesture
val finger = PointerInput(PointerInput.Kind.TOUCH, "finger")
val drag: Sequence? = Sequence(finger, 0)
drag?.addAction(finger.createPointerMove(Duration.ZERO, PointerInput.Origin.viewport(), centerX, centerY))
drag?.addAction(finger.createPointerDown(PointerInput.MouseButton.LEFT.asArg()))
drag?.addAction(
finger.createPointerMove(Duration.ofMillis(600), PointerInput.Origin.viewport(), centerX, dropY))
drag?.addAction(finger.createPointerUp(PointerInput.MouseButton.LEFT.asArg()))
driver.perform(mutableListOf(drag!!))
}
Flutter side :
BoxViewBottomSheet.showModalBottomSheet(
context: context,
builder:
(context) => BottomSheetChildWidget(
child: Column(
children: <Widget>[
Icon(key: ValueKey('bottom_sheet_close_icon'),FontAwesomeIcons.horizontalRule, color: BoxViewColors.details),
Container(
margin: EdgeInsets.only(left: 15.0, right: 15.0),
alignment: Alignment.topLeft,
child: Text(key: ValueKey('call_history_page_title'),'Call History', style: context.textTheme.titleLarge),
),
BoxViewBottomSheet.showModalBottomSheet(
context: context,
builder:
(context) => BottomSheetChildWidget(
child: Column(
children: <Widget>[
Icon(key: ValueKey('bottom_sheet_close_icon'),FontAwesomeIcons.horizontalRule, color: BoxViewColors.details),
Container(
margin: EdgeInsets.only(left: 15.0),
alignment: Alignment.topLeft,
child: Text(key: ValueKey('directory_page_title'),'Directory', style: context.textTheme.titleLarge),
),
Container(margin: EdgeInsets.only(top: 15.0, bottom: 5.0), child: searchBar()),
Flexible(child: DirectoryListWidget(key: directoryKey)),
],
),
),
class BottomSheetChildWidget extends StatelessWidget {
final Widget child;
const BottomSheetChildWidget({super.key, required this.child});
@override
Widget build(BuildContext context) {
final Size screenSize = context.mediaQuery.size;
bool isSmallerPhone = screenSize.height < 750;
return Container(
decoration: BoxDecoration(
color: MyThemes.titleAndIconTheme(context, AdditionThemeColors.ICON),
borderRadius: BorderRadius.circular(20.0),
),
height: isSmallerPhone ? screenSize.height - 80 : screenSize.height - 100,
width: screenSize.width,
child: Container(width: screenSize.width, child: child),
);
}
}
.
But that ⊕ handle get placed in different places of each screen and differs lot when changing devices. Like, in Poco F5, it swipes the notification drawer of the phone (handles goes the top status bar of phone).
For instance, see this different pages. Same appium code works differently. ⊕ handle get placed in different places..
Please help me. Am I doing right method? Or suggest a good method to achieve bottom sheet 'swipe down close' flow. .