SearchAnchor.openView(): изменить (унаследованную) ширину SearchBar? ⇐ Android

[Anonymous]

На моей flutter_map у меня есть IconButton, которая должна вызывать появление панели поиска только при нажатии. Когда поиск завершен, SearchBar может снова скрыться, и будет виден только указанный значок.
Я реализовал это с помощью кода, прикрепленного в конце.
Однако у меня есть проблема: ширина SearchBar, я думаю, наследуется от его родителя. Но родителем называется IconButton, и я бы предпочел, чтобы он занимал только пространство, необходимое для его изображения значка. Ну, это создает беспорядок, потому что ширина дочерней панели поиска теперь составляет 30 пикселей!
Обходной путь, который я нашел, не кажется мне идеальным: заставить указанную IconButton занять всю ширину экрана, чтобы ее дочерняя панель поиска занимала ту же ширину. Эта полная ширина не видна (виден только значок). Побочный эффект заключается в том, что весь столбец кнопок теперь перемещается в центр, как и ожидалось, несмотря на выравнивание по левому краю. Потому что теперь в этом столбце есть одна кнопка огромной ширины.
Container(
alignment: Alignment.topLeft,
// uncomment following to show the problem:
width: MediaQuery.sizeOf(context).width,
child: IconButton(
icon: const Icon(Icons.search),
onPressed: () {
// opens the SearchBar:
// can I tell it to resize?
controller.openView();
},

)
)

Кто-нибудь знает более элегантный способ щелкнуть значок и открыть панель поиска во всю ширину?
Вот код, который демонстрирует проблему. Раскомментировав строку, которой предшествует (THIS FIXES) вы увидите, что панель поиска имеет правильную ширину, но столбец кнопок сдвинут в центр.
(весь код открывается во всплывающем окне и включает в себя flutter_map, а также кнопки, поэтому мне более или менее нужна структура ниже)
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(title: 'Flutter Demo', home: const MyHomePage());
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Align(
alignment: Alignment.topLeft,
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: MyMapButtonsWidget(),
),
);
}
}

class MySearchWidget extends StatefulWidget {
const MySearchWidget({super.key});

@override
State createState() => _MySearchWidgetState();
}

class _MySearchWidgetState extends State {
final _searchController = SearchController();

@override
Widget build(BuildContext context) {
return SearchAnchor(
dividerColor: Colors.red,
// this refers to the history/results list dropdown
isFullScreen: false,
viewConstraints: BoxConstraints(
maxHeight: MediaQuery.sizeOf(context).height * 0.75,
),
viewBackgroundColor: Colors.grey.shade200,
keyboardType: TextInputType.streetAddress,
viewShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
searchController: _searchController,

builder: (BuildContext context, SearchController controller) {
// Here I click on this IconButton in order to open the SearchBar
// but its size is inherited from the IconButton and it is not full-width!
return Container(
// THIS FIXES the problem, but I don' want the icon to
// "occupy" this wide space!!!
/* width: MediaQuery
.sizeOf(context)
.width * 1.0,
*/
child: IconButton(
icon: const Icon(Icons.search),
onPressed: () {
controller.openView();
},
),
);
/*
// This works fine
return SearchBar(
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
controller: controller,
padding: const WidgetStatePropertyAll(
EdgeInsets.symmetric(horizontal: 16.0),
),
onTap: () {
controller.openView();
},
// add as many icons at the end
trailing: [
IconButton(
onPressed: controller.clear,
icon: const Icon(Icons.close),
),
],
// add the search icon at the front
leading: const Icon(Icons.search),
);
*/
},
suggestionsBuilder:
(BuildContext context, SearchController controller) async {
return [Text("aaa")];
},
);
}
}

class MyMapButtonsWidget extends StatefulWidget {
const MyMapButtonsWidget({super.key});

@override
State createState() => _MyMapButtonsWidgetState();
}

class _MyMapButtonsWidgetState extends State {
@override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 35,
padding: EdgeInsets.only(left: 5),
child: MySearchWidget(),
),
// zoom-in
Container(
width: 35,
height: 35,
padding: EdgeInsets.only(left: 5),
child: FloatingActionButton(
onPressed: () {
print("zoomin");
},
child: Icon(
Icons.add_circle_outlined,
size: 25,
color: Colors.black,
),
),
),
const SizedBox(height: 8),
// zoom-out
Container(
width: 35,
height: 35,
padding: EdgeInsets.only(left: 5),
child: FloatingActionButton(
onPressed: () {
print("zoomout");
},
child: Icon(
Icons.remove_circle_outline,
size: 25,
color: Colors.black,
),
),
),
const SizedBox(height: 8),
// pinpoint my geo-location
Container(
width: 35,
height: 35,
padding: EdgeInsets.only(left: 5),
child: FloatingActionButton(
onPressed: () {
print("currentloc");
},
child: Icon(
Icons.remove_circle_outline,
size: 25,
color: Colors.black,
),
),
),
],
),
],
),
);
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -searchbar