Repository navigation
[SearchAnchor.bar] Flutter M3 SearchAnchor.bar position issue. #126542
Description
Activity
Probably you didnt set [SearchViewThemeData.constraints] which is why it defaults to
const BoxConstraints(minWidth: 360.0, minHeight: 240.0)See https://api.flutter.dev/flutter/material/SearchAnchor/viewConstraints.html
Probably you didnt set [SearchViewThemeData.constraints] which is why it defaults to
const BoxConstraints(minWidth: 360.0, minHeight: 240.0)See https://api.flutter.dev/flutter/material/SearchAnchor/viewConstraints.html
Thank you, I adjusted the size using BoxConstraints. However, I can't figure out why the position of the popup is slightly shifted to the right. Is there a way to align the positions?
2023-05-12.12.03.36.mov
@Patrick386
I check this on the latest stable and master channel but can not reproduce it.Demo
Screen.Recording.2023-05-12.at.12.57.07.mov
Complete sample code
import 'package:flutter/material.dart'; /// Flutter code sample for pinned [SearchAnchor] while scrolling. void main() { runApp(const PinnedSearchBarApp()); } class PinnedSearchBarApp extends StatefulWidget { const PinnedSearchBarApp({super.key}); @override State<PinnedSearchBarApp> createState() => _PinnedSearchBarAppState(); } class _PinnedSearchBarAppState extends State<PinnedSearchBarApp> { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( useMaterial3: true, colorSchemeSeed: const Color(0xff6750a4)), home: Scaffold( body: Center( child: SizedBox( width: MediaQuery.of(context).size.width * 0.4, child: SearchAnchor.bar( suggestionsBuilder: (BuildContext context, SearchController controller) { return List<Widget>.generate( 5, (int index) { return ListTile( titleAlignment: ListTileTitleAlignment.center, title: Text('Initial list item $index'), ); }, ); }, ), ), ), ), ); } }
Can you try the complete minimal sample code above and confirm?
@Patrick386 I check this on the latest stable and master channel but can not reproduce it.
Demo
Complete sample code
Can you try the complete minimal sample code above and confirm?It seems like we've found the cause. If there's a 'Navigation rail' on the left, the position of the popup moves by the width of the rail. Can the 'search popup view' be positioned based on the search bar?
@Patrick386 Can you please share a complete and minimal sample code for your case? Is it somewhat similar to recent issue #126435?
@Patrick386 Can you please share a complete and minimal sample code for your case? Is it somewhat similar to recent issue #126435?
This problem is related to 'ShellRoute'. Below is the complete code where you can find the cause.
Code sample
[ import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:go_router/go_router.dart'; import 'package:rail_sub_menu/router/app_router.dart'; import 'package:rail_sub_menu/service/shared_storage.dart'; import 'logging.dart'; /// Submenu Demo in Navigation Rail /// RailSubMenu M3 /// Terminal > dart pub run build_runner watch void main() { setupLogger(); // App Log /// SharedPreferences init /// - navigation rail index caching SharedDisk.init(); runApp(ProviderScope(child: MyApp())); } class MyApp extends ConsumerWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context, WidgetRef ref) { final GoRouter router = ref.watch(routerProvider); return MaterialApp.router( debugShowCheckedModeBanner: false, title: 'Flutter M3 Rail SubMenu Demo', theme: ThemeData( primarySwatch: Colors.blue, ), routeInformationProvider: router.routeInformationProvider, routeInformationParser: router.routeInformationParser, routerDelegate: router.routerDelegate, ); } } /// Router abstract class AppRoutes { static String get home => 'home'; static String get homePath => '/'; static String get searchBar => 'searchBar'; static String get searchBarPath => '/searchBar'; } final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'rootNavigator'); final GlobalKey<NavigatorState> _shellNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'shellNavigator'); final Provider<GoRouter> routerProvider = Provider<GoRouter>((ProviderRef<GoRouter> ref) { /// The route configuration. return GoRouter( navigatorKey: _rootNavigatorKey, initialLocation: AppRoutes.homePath, routes: <RouteBase>[ /// Root page GoRoute( name: AppRoutes.home, path: AppRoutes.homePath, builder: (BuildContext context, GoRouterState state) { return const MyHomePage(); }, ), /// Rail ShellRoute ShellRoute( navigatorKey: _shellNavigatorKey, builder: (BuildContext context, GoRouterState state, Widget child) { return HomeMenuRail(child: child); }, routes: <RouteBase>[ GoRoute( name: AppRoutes.searchBar, path: AppRoutes.searchBarPath, builder: (BuildContext context, GoRouterState state) { return const SearchBarPage(); },), ], ), ], ); }); /// Home rail import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; class HomeMenuRail extends ConsumerStatefulWidget { const HomeMenuRail({Key? key, required this.child}) : super(key: key); final Widget child; @override ConsumerState<HomeMenuRail> createState() => _HomeMenuRailState(); } class _HomeMenuRailState extends ConsumerState<HomeMenuRail> with SingleTickerProviderStateMixin { int _selectedIndex = 0; List<NavigationRailDestination> _navigationRailDestination = [ NavigationRailDestination( icon: Icon(Icons.favorite_border), selectedIcon: Icon(Icons.favorite), label: Text('First Menu'), ), NavigationRailDestination( icon: Icon(Icons.bookmark_border), selectedIcon: Icon(Icons.book), label: Text('Second Menu'), ), NavigationRailDestination( icon: Icon(Icons.star_border), selectedIcon: Icon(Icons.star), label: Text('Third Menu'), ), ]; @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return LayoutBuilder( builder: (context, constraints) => Scaffold( body: ConstrainedBox( constraints: BoxConstraints.expand(), child: Row( children: [ NavigationRail( selectedIndex: _selectedIndex, onDestinationSelected: (int index) { setState(() { _selectedIndex = index; }); }, labelType: NavigationRailLabelType.selected, destinations: _navigationRailDestination, ), const VerticalDivider( thickness: 1, width: 0.5, color: Colors.grey), /// This is the main content. Expanded( child: widget.child, ) ], ), ), )); } } /// Main page import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import '../../router/app_router.dart'; class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Container( child: Column( children: [ Text('MyHome page'), SizedBox(height: 40.0,), TextButton(onPressed: ()=>context.goNamed(AppRoutes.searchBar), child: Text('Go SearchBar')) ], ), )), ); } } /// Search page import 'package:flutter/material.dart'; class SearchBarPage extends StatefulWidget { const SearchBarPage({Key? key, }) : super(key: key); @override State<SearchBarPage> createState() => _SearchBarPageState(); } class _SearchBarPageState extends State<SearchBarPage> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child:_SearchBar(), ) ); } } class _SearchBar extends StatefulWidget { const _SearchBar({Key? key}) : super(key: key); @override State<_SearchBar> createState() => _SearchBarState(); } class _SearchBarState extends State<_SearchBar> { final SearchController searchController = SearchController(); var searchBarTheme = SearchBarThemeData( backgroundColor: const MaterialStatePropertyAll<Color>(Colors.white), ); SearchViewThemeData searchViewTheme = const SearchViewThemeData( constraints: BoxConstraints(minWidth: 360.0, minHeight: 140.0, maxHeight: 300.0), ); @override Widget build(BuildContext context) { return SearchBarTheme( data: searchBarTheme, child: SearchViewTheme( data: searchViewTheme, child: SearchAnchor.bar( barHintText: 'Search', searchController: searchController, suggestionsBuilder: (BuildContext context, SearchController controller) { if (controller.text.isNotEmpty) { } return [SizedBox.shrink()]; }, ), ), ); } } ]
Hi @Patrick386
As I see from above sample code, it contains 3rd plugins and undefined classes. In order to address the issue properly, please provide a completed and minimal reproducible code sample that doesn’t include 3rd party plugins or complex production code so that we may verify this. Thank you!Hi @Patrick386! Thanks for filing this issue. I think this can be fixed by #127198.
Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Jun 23, 2023
Is there an existing issue for this?
Steps to reproduce
Expected results
The position of the search bar and the popup do not match.
Additionally, SearchAnchorTheme does not exist; instead, there is SearchViewTheme.
What is the method to adjust the position and size?
Actual results
The position of the search bar and the popup do not match.
Code sample
Code sample
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
2023-05-11.10.31.39.mov
Logs
Logs
[-]Flutter Doctor output
Doctor output