1. 29 Sep, 2023 1 commit
  2. 28 Sep, 2023 1 commit
    • Renzo Olivares's avatar
      Implement SelectionArea single click/tap gestures (#132682) · 21ad7122
      Renzo Olivares authored
      This change collapses the selection at the clicked/tapped location on single click down for desktop platforms, and on single click/tap up for mobile platforms to match native.
      
      This is a change from how `SelectionArea` previously worked. Before this change a single click down would clear the selection. From observing a native browser it looks like when tapping on static text the selection is not cleared but collapsed. A user can still attain the selection from static text using the `window.getSelection` API.
      
      https://jsfiddle.net/juepasn3/11/ You can try this demo out here to observe this behavior yourself. When clicking on static text the selection will change.
      
      This change also allows `Paragraph.selections` to return selections that are collapsed. This for testing purposes to confirm where the selection has been collapsed.
      
      Partially fixes: #129583
      21ad7122
  3. 20 Sep, 2023 3 commits
  4. 18 Sep, 2023 2 commits
  5. 14 Sep, 2023 1 commit
  6. 13 Sep, 2023 1 commit
  7. 12 Sep, 2023 1 commit
  8. 11 Sep, 2023 1 commit
  9. 08 Sep, 2023 1 commit
  10. 01 Sep, 2023 1 commit
    • Andrea Cioni's avatar
      Add an example for `InputChip` generated by user input (#130645) · 400702d1
      Andrea Cioni authored
      New example for `InputChip` that demonstrate how to create/delete them based on user text inputs.
      
      The sample application shows a custom text area where user can enter text. After the user has typed and hits _Enter_ the text will be replaced with an `InputChip` that contains that text. Is it possible to continue typing and add more chips in this way. All of them will be placed in a scrollable horizontal row. Also is it possible to have suggestion displayed below the text input field in case the typed text match some of the available suggestions.
      
      Issue I'm trying to solve:
      
      - https://github.com/flutter/flutter/issues/128247
      
      **Code structure:**
      
      The example app is composed of 2 main components that find places inside `MainScreen`:
      
       - `ChipsInput`
       - `ListView`
      
      `ChipsInput` emulates a `TextField` where you can enter text. This text field accepts also a list of values of generic type T (`Topping` in my example), that gets rendered as `InputChip` inside the text field, before the text inserted by the user. This widgets is basically an `InputDecorator` widget that implements `TextInputClient` to get `TextEditingValue` events from the user keyboard. At the end of the input field there is another component, the `TextCursor`, that is displayed just when the user give the focus to the field and emulates the carrets that `TextField` has.
      
      There are also some available callbacks that the user can use to capture events in the `ChipsInput` field like: `onChanged`, `onChipTapped`, `onSubmitted` and `onTextChanged`. This last callback is used to build a list of suggestion that will be placed just below the `ChipsInput` field inside the `ListView`.
      400702d1
  11. 31 Aug, 2023 2 commits
  12. 30 Aug, 2023 1 commit
  13. 29 Aug, 2023 2 commits
  14. 25 Aug, 2023 3 commits
  15. 22 Aug, 2023 1 commit
    • Taha Tesser's avatar
      Update default menu text styles for Material 3 (#131930) · 1bc79169
      Taha Tesser authored
      Related https://github.com/flutter/flutter/issues/131676
      
      ## Description
      
      #### Fix default input text style for `DropdownMenu`
      
      ![dropdown_input](https://github.com/flutter/flutter/assets/48603081/301f8243-155a-4b8f-84a8-5e6b7bebb3bc)
      
      ### Fix default text style for  `MenuAnchor`'s menu items (which `DropdownMenu` uses for menu items)
      
      ![dropdown_item](https://github.com/flutter/flutter/assets/48603081/6b5be81a-72fc-4705-a577-074c7a4cad8f)
      
      ###  Default  `DropdownMenu` Input text style 
      
      ![Screenshot 2023-08-04 at 16 48 28](https://github.com/flutter/flutter/assets/48603081/bcd9da98-e74d-491e-ae64-6268ae0b3893)
      
      ### Default `DropdownMenu` menu item text style
      
      ![Screenshot 2023-08-04 at 16 50 19](https://github.com/flutter/flutter/assets/48603081/9592ca43-2854-45b5-8648-203ab65d9745)
      
      ### Default `MenuAnchor` menu item text style
      
      ![Screenshot 2023-08-04 at 14 34 28](https://github.com/flutter/flutter/assets/48603081/e87e1073-05f8-4dc7-a435-d864e9cce6ab)
      
      ### Code sample
      
      <details> 
      <summary>expand to view the code sample</summary> 
      
      ```dart
      import 'package:flutter/material.dart';
      
      /// Flutter code sample for [DropdownMenu]s. The first dropdown menu has an outlined border.
      
      void main() => runApp(const DropdownMenuExample());
      
      class DropdownMenuExample extends StatefulWidget {
        const DropdownMenuExample({super.key});
      
        @override
        State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
      }
      
      class _DropdownMenuExampleState extends State<DropdownMenuExample> {
        final TextEditingController colorController = TextEditingController();
        final TextEditingController iconController = TextEditingController();
        ColorLabel? selectedColor;
        IconLabel? selectedIcon;
      
        @override
        Widget build(BuildContext context) {
          final List<DropdownMenuEntry<ColorLabel>> colorEntries =
              <DropdownMenuEntry<ColorLabel>>[];
          for (final ColorLabel color in ColorLabel.values) {
            colorEntries.add(
              DropdownMenuEntry<ColorLabel>(
                  value: color, label: color.label, enabled: color.label != 'Grey'),
            );
          }
      
          final List<DropdownMenuEntry<IconLabel>> iconEntries =
              <DropdownMenuEntry<IconLabel>>[];
          for (final IconLabel icon in IconLabel.values) {
            iconEntries
                .add(DropdownMenuEntry<IconLabel>(value: icon, label: icon.label));
          }
      
          return MaterialApp(
            theme: ThemeData(
              useMaterial3: true,
              colorSchemeSeed: Colors.green,
              // textTheme: const TextTheme(
              //   bodyLarge: TextStyle(
              //     fontWeight: FontWeight.bold,
              //     fontStyle: FontStyle.italic,
              //     decoration: TextDecoration.underline,
              //   ),
              // ),
            ),
            home: Scaffold(
              body: SafeArea(
                child: Column(
                  children: <Widget>[
                    const Text('DropdownMenus'),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          DropdownMenu<ColorLabel>(
                            controller: colorController,
                            label: const Text('Color'),
                            dropdownMenuEntries: colorEntries,
                            onSelected: (ColorLabel? color) {
                              setState(() {
                                selectedColor = color;
                              });
                            },
                          ),
                          const SizedBox(width: 20),
                          DropdownMenu<IconLabel>(
                            controller: iconController,
                            enableFilter: true,
                            leadingIcon: const Icon(Icons.search),
                            label: const Text('Icon'),
                            dropdownMenuEntries: iconEntries,
                            inputDecorationTheme: const InputDecorationTheme(
                              filled: true,
                              contentPadding: EdgeInsets.symmetric(vertical: 5.0),
                            ),
                            onSelected: (IconLabel? icon) {
                              setState(() {
                                selectedIcon = icon;
                              });
                            },
                          ),
                        ],
                      ),
                    ),
                    const Text('Plain TextFields'),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 20),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(
                            width: 150,
                            child: TextField(
                                controller: TextEditingController(text: 'Blue'),
                                decoration: const InputDecoration(
                                  suffixIcon: Icon(Icons.arrow_drop_down),
                                  labelText: 'Color',
                                  border: OutlineInputBorder(),
                                )),
                          ),
                          const SizedBox(width: 20),
                          SizedBox(
                            width: 150,
                            child: TextField(
                                controller: TextEditingController(text: 'Smile'),
                                decoration: const InputDecoration(
                                  prefixIcon: Icon(Icons.search),
                                  suffixIcon: Icon(Icons.arrow_drop_down),
                                  filled: true,
                                  labelText: 'Icon',
                                )),
                          ),
                        ],
                      ),
                    ),
                    if (selectedColor != null && selectedIcon != null)
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                              'You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 5),
                            child: Icon(
                              selectedIcon?.icon,
                              color: selectedColor?.color,
                            ),
                          )
                        ],
                      )
                    else
                      const Text('Please select a color and an icon.')
                  ],
                ),
              ),
            ),
          );
        }
      }
      
      enum ColorLabel {
        blue('Blue', Colors.blue),
        pink('Pink', Colors.pink),
        green('Green', Colors.green),
        yellow('Yellow', Colors.yellow),
        grey('Grey', Colors.grey);
      
        const ColorLabel(this.label, this.color);
        final String label;
        final Color color;
      }
      
      enum IconLabel {
        smile('Smile', Icons.sentiment_satisfied_outlined),
        cloud(
          'Cloud',
          Icons.cloud_outlined,
        ),
        brush('Brush', Icons.brush_outlined),
        heart('Heart', Icons.favorite);
      
        const IconLabel(this.label, this.icon);
        final String label;
        final IconData icon;
      }
      
      ``` 
      	
      </details>
      1bc79169
  16. 21 Aug, 2023 1 commit
  17. 17 Aug, 2023 1 commit
  18. 16 Aug, 2023 2 commits
  19. 15 Aug, 2023 2 commits
    • Polina Cherkasova's avatar
      Upgrade flutter packages. (#132585) · f0e7c518
      Polina Cherkasova authored
      f0e7c518
    • Ian Hickson's avatar
      PaginatedDataTable improvements (#131374) · ccdf8264
      Ian Hickson authored
      - slightly improved assert message when row cell counts don't match column count.
      - more breadcrumbs in API documentation. more documentation in general.
      - added more documentation for the direction of the "ascending" arrow.
      - two samples for PaginatedDataTable.
      - make PaginatedDataTable support hot reloading across changes to the number of columns.
      - introduce matrix3MoreOrLessEquals. An earlier version of this PR used it in tests, but eventually it was not needed. The function seems useful to keep though.
      ccdf8264
  20. 14 Aug, 2023 1 commit
  21. 10 Aug, 2023 4 commits
  22. 09 Aug, 2023 3 commits
  23. 08 Aug, 2023 2 commits
  24. 04 Aug, 2023 2 commits
    • Justin McCandless's avatar
      Predictive back support for root routes (#120385) · dedd100e
      Justin McCandless authored
      This PR aims to support Android's predictive back gesture when popping the entire Flutter app.  Predictive route transitions between routes inside of a Flutter app will come later.
      
      <img width="200" src="https://user-images.githubusercontent.com/389558/217918109-945febaa-9086-41cc-a476-1a189c7831d8.gif" />
      
      ### Trying it out
      
      If you want to try this feature yourself, here are the necessary steps:
      
        1. Run Android 33 or above.
        1. Enable the feature flag for predictive back on the device under "Developer
           options".
        1. Create a Flutter project, or clone [my example project](https://github.com/justinmc/flutter_predictive_back_examples).
        1. Set `android:enableOnBackInvokedCallback="true"` in
           android/app/src/main/AndroidManifest.xml (already done in the example project).
        1. Check out this branch.
        1. Run the app. Perform a back gesture (swipe from the left side of the
           screen).
      
      You should see the predictive back animation like in the animation above and be able to commit or cancel it.
      
      ### go_router support
      
      go_router works with predictive back out of the box because it uses a Navigator internally that dispatches NavigationNotifications!
      
      ~~go_router can be supported by adding a listener to the router and updating SystemNavigator.setFrameworkHandlesBack.~~
      
      Similar to with nested Navigators, nested go_routers is supported by using a PopScope widget.
      
      <details>
      
      <summary>Full example of nested go_routers</summary>
      
      ```dart
      // Copyright 2014 The Flutter Authors. All rights reserved.
      // Use of this source code is governed by a BSD-style license that can be
      // found in the LICENSE file.
      
      import 'package:go_router/go_router.dart';
      
      import 'package:flutter/material.dart';
      import 'package:flutter/scheduler.dart';
      
      void main() => runApp(_MyApp());
      
      class _MyApp extends StatelessWidget {
        final GoRouter router = GoRouter(
          routes: <RouteBase>[
            GoRoute(
              path: '/',
              builder: (BuildContext context, GoRouterState state) => _HomePage(),
            ),
            GoRoute(
              path: '/nested_navigators',
              builder: (BuildContext context, GoRouterState state) => _NestedGoRoutersPage(),
            ),
          ],
        );
      
        @override
        Widget build(BuildContext context) {
          return MaterialApp.router(
            routerConfig: router,
          );
        }
      }
      
      class _HomePage extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Nested Navigators Example'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('Home Page'),
                  const Text('A system back gesture here will exit the app.'),
                  const SizedBox(height: 20.0),
                  ListTile(
                    title: const Text('Nested go_router route'),
                    subtitle: const Text('This route has another go_router in addition to the one used with MaterialApp above.'),
                    onTap: () {
                      context.push('/nested_navigators');
                    },
                  ),
                ],
              ),
            ),
          );
        }
      }
      
      class _NestedGoRoutersPage extends StatefulWidget {
        @override
        State<_NestedGoRoutersPage> createState() => _NestedGoRoutersPageState();
      }
      
      class _NestedGoRoutersPageState extends State<_NestedGoRoutersPage> {
        late final GoRouter _router;
        final GlobalKey<NavigatorState> _nestedNavigatorKey = GlobalKey<NavigatorState>();
      
        // If the nested navigator has routes that can be popped, then we want to
        // block the root navigator from handling the pop so that the nested navigator
        // can handle it instead.
        bool get _popEnabled {
          // canPop will throw an error if called before build. Is this the best way
          // to avoid that?
          return _nestedNavigatorKey.currentState == null ? true : !_router.canPop();
        }
      
        void _onRouterChanged() {
          // Here the _router reports the location correctly, but canPop is still out
          // of date.  Hence the post frame callback.
          SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
            setState(() {});
          });
        }
      
        @override
        void initState() {
          super.initState();
      
          final BuildContext rootContext = context;
          _router = GoRouter(
            navigatorKey: _nestedNavigatorKey,
            routes: [
              GoRoute(
                path: '/',
                builder: (BuildContext context, GoRouterState state) => _LinksPage(
                  title: 'Nested once - home route',
                  backgroundColor: Colors.indigo,
                  onBack: () {
                    rootContext.pop();
                  },
                  buttons: <Widget>[
                    TextButton(
                      onPressed: () {
                        context.push('/two');
                      },
                      child: const Text('Go to another route in this nested Navigator'),
                    ),
                  ],
                ),
              ),
              GoRoute(
                path: '/two',
                builder: (BuildContext context, GoRouterState state) => _LinksPage(
                  backgroundColor: Colors.indigo.withBlue(255),
                  title: 'Nested once - page two',
                ),
              ),
            ],
          );
      
          _router.addListener(_onRouterChanged);
        }
      
        @override
        void dispose() {
          _router.removeListener(_onRouterChanged);
          super.dispose();
        }
      
        @override
        Widget build(BuildContext context) {
          return PopScope(
            popEnabled: _popEnabled,
            onPopped: (bool success) {
              if (success) {
                return;
              }
              _router.pop();
            },
            child: Router<Object>.withConfig(
              restorationScopeId: 'router-2',
              config: _router,
            ),
          );
        }
      }
      
      class _LinksPage extends StatelessWidget {
        const _LinksPage ({
          required this.backgroundColor,
          this.buttons = const <Widget>[],
          this.onBack,
          required this.title,
        });
      
        final Color backgroundColor;
        final List<Widget> buttons;
        final VoidCallback? onBack;
        final String title;
      
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            backgroundColor: backgroundColor,
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(title),
                  //const Text('A system back here will go back to Nested Navigators Page One'),
                  ...buttons,
                  TextButton(
                    onPressed: onBack ?? () {
                      context.pop();
                    },
                    child: const Text('Go back'),
                  ),
                ],
              ),
            ),
          );
        }
      }
      ```
      
      </details>
      
      ### Resources
      
      Fixes https://github.com/flutter/flutter/issues/109513
      Depends on engine PR https://github.com/flutter/engine/pull/39208 :heavy_check_mark: 
      Design doc: https://docs.google.com/document/d/1BGCWy1_LRrXEB6qeqTAKlk-U2CZlKJ5xI97g45U7azk/edit#
      Migration guide: https://github.com/flutter/website/pull/8952
      dedd100e
    • Polina Cherkasova's avatar
      Upgrade packages. (#131927) · 2c102959
      Polina Cherkasova authored
      2c102959