Git Product home page Git Product logo

Comments (21)

jamesblasco avatar jamesblasco commented on June 4, 2024 14

Yeah Scaffold expands its body, the biggest as possible.
Keyboard Avoider it was an example on how you can change the position when the keyboard appears. It is not a solution, but a guidance on how you could solve it by building something custom for this case

And it is weird that view insets doesn't work

Check the code for the widget I add inside the modal 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'dart:math';
import 'dart:collection';
import 'package:flutter/widgets.dart';
import 'package:flutter/rendering.dart';


class ModalFit extends StatelessWidget {
  final ScrollController scrollController;

  const ModalFit({Key key, this.scrollController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  AnimatedPadding(
      duration: Duration(milliseconds: 250),
        padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom),
        child: Material(child:  SafeArea(
      top: false,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextField(),
          ListTile(
            title: Text('Edit'),
            leading: Icon(Icons.edit),
            onTap: () => Navigator.of(context).pop(),
          ),
          ListTile(
            title: Text('Copy'),
            leading: Icon(Icons.content_copy),
            onTap: () => Navigator.of(context).pop(),
          ),
          ListTile(
            title: Text('Cut'),
            leading: Icon(Icons.content_cut),
            onTap: () => Navigator.of(context).pop(),
          ),
          ListTile(
            title: Text('Move'),
            leading: Icon(Icons.folder_open),
            onTap: () => Navigator.of(context).pop(),
          ),
          ListTile(
            title: Text('Delete'),
            leading: Icon(Icons.delete),
            onTap: () => Navigator.of(context).pop(),
          )
        ],
      ),
    ),));
  }
}

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024 9

tested, that was it. Using the AnimatedPadding worked. thanks!

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024 5

Not wrapping showBarBottomSheet inside a StatelessWidget, all the content inside.
Something like the code below

class EditHomeMarquee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: HomePageMarquee(
        textColor: Theme.of(context).colorScheme.onPrimary,
      ),
      onTap: () {
        _editMarqueeSheet(context, 'Cambio de Marquee');
      },
    );
  }


  

  _editMarqueeSheet(BuildContext context, String title) async {
    String _prevText =
    await Provider.of<FirebaseDataProvider>(context, listen: false)
        .getMarquee();
    TextEditingController _marqueeController =
    TextEditingController(text: _prevText);
    return showBarModalBottomSheet(
      context: context,
      // expand: true,
      builder: (BuildContext context, ScrollController scrollController) {
        return Modal();
      },
    );
  }
}

class Modal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedPadding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      duration: Duration(milliseconds: 250),
      child: Material(
        color: Theme.of(context).colorScheme.primary,
        child: SafeArea(
          top: false,
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                AutoSizeText(
                  title,
                  style: TextStyle(
                      color: Theme.of(context).colorScheme.onPrimary),
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'escribe aquí'),
                  controller: _marqueeController,
                  autofocus: true,
                ),
                FlatButton(
                  color: Colors.green,
                  child: AutoSizeText(
                    'OK',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    Provider.of<FirebaseDataProvider>(context,
                        listen: false)
                        .setMarquee(_marqueeController.text);
                    Navigator.of(context).pop();
                  },
                ),
                FlatButton(
                  color: Colors.red,
                  child: AutoSizeText(
                    'Cancelar',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024 2

Also you can wrap your modal with this.

Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: ....
);

It jumps when the keyboard appears, if you want to animate it you can use AnimatedPadding for when the values changes.

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024 1

wow, so many solutions, I will test 1 by 1 and report what worked. thanks

from modal_bottom_sheet.

bierbaumtim avatar bierbaumtim commented on June 4, 2024

Resizing when keyboard is open is managed by the Scaffold widget. So try to wrap your modal sheet with a Scaffold. Often fixes such issues.

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

As @bierbaumtim explains very well, in Flutter as far as I know the Scaffold is the only widget that resizes when the keyboard appears. So using a Scaffold widget inside the modal as parent could be a good solution.
Also you could implement your custom option, check this example.

With this I think it would be better to resize the content inside the modal rather than trying to resize all the modal as it would bring more complexity to this widget.

Let us know how it behaves with the Scaffold!!

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024

Ok so Scaffold was a better expand: true as this allowed the full modal to show but did not use the correct amount of padding but used the full amount.

With Scaffold no shrinkwrap
with or without kb same height, same with ViewInsets padding
Snipaste_2020-05-06_11-05-09

Without Scafoold, using Keyboard Avoider with auto scroll no shrinkwrap
same as with Scaffold but more buggy
Snipaste_2020-05-06_11-17-07

ViewInsets padding did not work as no change was seen. edit: same as with scaffold, it uses the full screen.

Unfortunately, there doesn't seem to be a fix to this :(

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024 
class EditHomeMarquee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: HomePageMarquee(
        textColor: Theme.of(context).colorScheme.onPrimary,
      ),
      onTap: () {
        _editMarqueeSheet(context, 'Cambio de Marquee');
      },
    );
  }

  _editMarqueeSheet(BuildContext context, String title) async {
    String _prevText =
        await Provider.of<FirebaseDataProvider>(context, listen: false)
            .getMarquee();
    TextEditingController _marqueeController =
        TextEditingController(text: _prevText);
    return showBarModalBottomSheet(
      context: context,
      // expand: true,
      builder: (BuildContext context, ScrollController scrollController) {
        return AnimatedPadding(
          padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
          duration: Duration(milliseconds: 250),
          child: Material(
            color: Theme.of(context).colorScheme.primary,
            child: SafeArea(
              top: false,
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    AutoSizeText(
                      title,
                      style: TextStyle(
                          color: Theme.of(context).colorScheme.onPrimary),
                    ),
                    TextField(
                      decoration: InputDecoration(hintText: 'escribe aquí'),
                      controller: _marqueeController,
                      autofocus: true,
                    ),
                    FlatButton(
                      color: Colors.green,
                      child: AutoSizeText(
                        'OK',
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () {
                        Provider.of<FirebaseDataProvider>(context,
                                listen: false)
                            .setMarquee(_marqueeController.text);
                        Navigator.of(context).pop();
                      },
                    ),
                    FlatButton(
                      color: Colors.red,
                      child: AutoSizeText(
                        'Cancelar',
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

This is what I got by copying your code and these are the results:

This is with expand: true
Snipaste_2020-05-06_11-55-48

This is with expand: false
Snipaste_2020-05-06_11-57-15

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

Could you wrap it inside a StatelessWidget just to check it 😓

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024

Could you wrap it inside a StatelessWidget just to check it 😓

Sorry, I lack the knowledge of wrapping the showBarBottomSheet in a StatelessWidget.

how can I do it with my current example? 😅

I get A value of type 'Future can't be returned from method 'build' because it has a return type of 'Widget'.dart(return_of_invalid_type)

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024 
class EditHomeMarquee extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: HomePageMarquee(
        textColor: Theme.of(context).colorScheme.onPrimary,
      ),
      onTap: () {
        _editMarqueeSheet(context, 'Cambio de Marquee');
      },
    );
  }

  _editMarqueeSheet(BuildContext context, String title) async {
    String _prevText =
        await Provider.of<FirebaseDataProvider>(context, listen: false)
            .getMarquee();

    return showBarModalBottomSheet(
      context: context,
      // expand: true,
      builder: (BuildContext context, ScrollController scrollController) {
        return EditMarqueeSheet(
          title: title,
          prevText: _prevText,
        );
      },
    );
  }
}

class EditMarqueeSheet extends StatelessWidget {
  final String title;
  final String prevText;

  const EditMarqueeSheet({Key key, this.title, this.prevText})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextEditingController _marqueeController =
        TextEditingController(text: prevText);
    return AnimatedPadding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      duration: Duration(milliseconds: 250),
      child: Material(
        color: Theme.of(context).colorScheme.primary,
        child: SafeArea(
          top: false,
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                AutoSizeText(
                  title,
                  style:
                      TextStyle(color: Theme.of(context).colorScheme.onPrimary),
                ),
                TextField(
                  decoration: InputDecoration(hintText: 'escribe aquí'),
                  controller: _marqueeController,
                  autofocus: true,
                ),
                FlatButton(
                  color: Colors.green,
                  child: AutoSizeText(
                    'OK',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    Provider.of<FirebaseDataProvider>(context, listen: false)
                        .setMarquee(_marqueeController.text);
                    Navigator.of(context).pop();
                  },
                ),
                FlatButton(
                  color: Colors.red,
                  child: AutoSizeText(
                    'Cancelar',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Ok I did it, in terms of performance does it make any difference?

the results were the same with this code btw. weird...

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

In this case more than performance would be readability. But it is a good behavior to create StatelessWidgets when you have large widgets and more when you use functions as showBarModalBottomSheet , showDialog that push a new route and the context would be different. This will help to make less errors.

I will keep looking to check why is not working in your case. I will try also on Android as I have only tried on iOS.

As recommendation for future comments you do on github is really useful to use code highlighting. (without the end dot)

 final example = false;
```dart
 final example = false;
```.

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024

I see thank you for your tips, I am running my app on Android device but the entire theme has been set to iOS but I am still using Material mmm maybe I should not use Material if that makes a difference.

Thank you for your time

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

Mmm apparently on my Android simulator works fine, could you let me know which version of fltuter are you using currently?
(You can see if you run the command flutter doctor)

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024

Here it is:

[√] Flutter (Channel stable, v1.12.13+hotfix.9, on Microsoft Windows [Version 10.0.18362.778], locale en-US)
 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[√] VS Code (version 1.44.2)
[√] Connected device (1 available)

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

Mmm, could you try removing the device_preview package? Or at least the builder param in MaterialApp. This package creates a new MediaQuery and could be breaking this.

from modal_bottom_sheet.

fenchai23 avatar fenchai23 commented on June 4, 2024

mmm that could be it!

I will test tomorrow. btw does expand: true parameter mean to always use the full height?

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

Yeah, exactly, it expands de modal to use all the screen. And it you set it to false it will fit to the size of its child

from modal_bottom_sheet.

jamesblasco avatar jamesblasco commented on June 4, 2024

It would be interesting to submit the issue in the package

from modal_bottom_sheet.

dreamer2q avatar dreamer2q commented on June 4, 2024

Yeah Scaffold expands its body, the biggest as possible.
Keyboard Avoider it was an example on how you can change the position when the keyboard appears. It is not a solution, but a guidance on how you could solve it by building something custom for this case

And it is weird that view insets doesn't work

Check the code for the widget I add inside the modal

This works with keyboard open, but introduce a new problem:
that is PopupMenu, because of padding, flutter think it visible for showing widget,
thus, PopupMenu is covered up by keyboard.

image

@jamesblasco

from modal_bottom_sheet.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.