flutter-form-builder-ecosystem / form_builder_extra_fields

Additional ready-made form input fields for flutter_form_builder package
https://pub.dev/packages/form_builder_extra_fields
BSD 3-Clause "New" or "Revised" License
28 stars 47 forks source link

ChipsInput must be in a scrollable view, otherwise error #65

Closed nlfiedler closed 1 year ago

nlfiedler commented 1 year ago

Environment

Package version: 8.5.0

Flutter doctor ``` Doctor summary (to see all details, run flutter doctor -v): [!] Flutter (Channel stable, 3.7.5, on macOS 13.2 22D49 darwin-arm64, locale en) ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.19.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nfiedler/fvm/versions/stable. Consider adding /Users/nfiedler/fvm/versions/stable/bin to the front of your path. [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Xcode - develop for iOS and macOS (Xcode 14.2) [✓] Chrome - develop for the web [!] Android Studio (not installed) [✓] VS Code (version 1.76.1) [✓] Connected device (2 available) [✓] HTTP Host Availability ! Doctor found issues in 3 categories. ```
Code sample Taking the example from the old flutter_chips_input package and removing the scrollable view. Seems like there should not be any need for that, or am I wrong? ```dart import 'package:flutter/material.dart'; import 'package:form_builder_extra_fields/form_builder_extra_fields.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Chips Input', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override // ignore: library_private_types_in_public_api _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { final _chipKey = GlobalKey(); @override Widget build(BuildContext context) { const mockResults = [ AppProfile('John Doe', 'jdoe@flutter.io', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg'), AppProfile('Paul', 'paul@google.com', 'https://mbtskoudsalg.com/images/person-stock-image-png.png'), AppProfile('Fred', 'fred@google.com', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Brian', 'brian@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('John', 'john@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Thomas', 'thomas@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Nelly', 'nelly@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Marie', 'marie@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Charlie', 'charlie@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Diana', 'diana@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Ernie', 'ernie@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), AppProfile('Gina', 'fred@flutter.io', 'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'), ]; return Scaffold( appBar: AppBar(title: const Text('Flutter Chips Input Example')), resizeToAvoidBottomInset: false, body: Padding( padding: const EdgeInsets.all(20), child: Column( children: [ FormBuilderChipsInput( key: _chipKey, name: 'Example', keyboardAppearance: Brightness.dark, textCapitalization: TextCapitalization.words, decoration: const InputDecoration( labelText: 'Select People', ), findSuggestions: (String query) { if (query.isNotEmpty) { var lowercaseQuery = query.toLowerCase(); return mockResults.where((profile) { return profile.name .toLowerCase() .contains(query.toLowerCase()) || profile.email .toLowerCase() .contains(query.toLowerCase()); }).toList(growable: false) ..sort((a, b) => a.name .toLowerCase() .indexOf(lowercaseQuery) .compareTo( b.name.toLowerCase().indexOf(lowercaseQuery))); } return mockResults; }, onChanged: (data) { // print(data); }, chipBuilder: (context, state, dynamic profile) { return InputChip( key: ObjectKey(profile), label: Text(profile.name), avatar: CircleAvatar( backgroundImage: NetworkImage(profile.imageUrl), ), onDeleted: () => state.deleteChip(profile), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, ); }, suggestionBuilder: (context, state, dynamic profile) { return ListTile( key: ObjectKey(profile), leading: CircleAvatar( backgroundImage: NetworkImage(profile.imageUrl), ), title: Text(profile.name), subtitle: Text(profile.email), onTap: () => state.selectSuggestion(profile), ); }, ), ], ), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } class AppProfile { final String name; final String email; final String imageUrl; const AppProfile(this.name, this.email, this.imageUrl); @override bool operator ==(Object other) => identical(this, other) || other is AppProfile && runtimeType == other.runtimeType && name == other.name; @override int get hashCode => name.hashCode; @override String toString() { return name; } } ```

Description

Expected behavior: With version 8.3.0 you get other errors, but eventually you can get the chips input to function as expected.

Current behavior: With version 8.5.0 the chips input is seemingly broken, with or without the scrollable view. I am using the chrome browser, by the way.

Steps to reproduce

  1. Use the example above, fire up the app, try typing something in the input field. With scrollable view included, nothing happens at all. Without scrollable view, get the error. With version 8.3.0 you can, after getting other errors, making the chips input appear as expected.

Stacktrace/Logcat

Error: Scrollable.of() was called with a context that does not contain a Scrollable widget.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49                throw_
packages/flutter/src/widgets/scrollable.dart 336:9                                          <fn>
packages/flutter/src/widgets/scrollable.dart 347:14                                         of
packages/form_builder_extra_fields/src/widgets/flutter_chips_input/chips_input.dart 291:47  <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                          runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                          _async
packages/form_builder_extra_fields/src/widgets/flutter_chips_input/chips_input.dart 289:53  <fn>
packages/flutter/src/scheduler/binding.dart 1289:15                                         [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1227:9                                          handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1076:5                                          [_handleDrawFrame]
lib/_engine/engine/platform_dispatcher.dart 1168:13                                         invoke
lib/_engine/engine/platform_dispatcher.dart 218:5                                           invokeOnDrawFrame
lib/_engine/engine/initialization.dart 190:45                                               <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37            _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39            dcall
deandreamatias commented 1 year ago

This field was removed from package