IOS layout Issue

[poovarasanvasudevan]

I am using with IOS it gives different behaviour, input is hidden at the botton

Then i tried to added safearea

My code look like this

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(
          "Messages",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Color(0xff0052cc),
        leading: CupertinoNavigationBarBackButton(
          color: Colors.white,
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(
            Ionicons.ios_settings,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ),
      body: SafeArea(
        child: Container(
          color : Colors.white,
          //padding: EdgeInsets.only(bottom: 40),
          child: DashChat(
              scrollToBottom: false,
              onSend: onSend,
              messages: [
                ChatMessage(text: "Hello", user: user, id: "hello"),
              ],
              user: user,
              dateFormat: DateFormat('yyyy-MMM-dd'),
              timeFormat: DateFormat('HH:mm'),
              alwaysShowSend: false,
              messageContainerPadding: EdgeInsets.zero,
              inputContainerStyle: BoxDecoration(
                  border: Border.all(
                      width: 1.0,
                      color: CupertinoColors.lightBackgroundGray),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25)
              ),
              shouldShowLoadEarlier: true,
              showTraillingBeforeSend: true,
              trailing: <Widget>[
                IconButton(
                  icon: Icon(Feather.camera),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              sendButtonBuilder: (Function click) {
                return IconButton(
                  icon: Icon(Feather.send),
                  onPressed: click,
                );
              },
              leading: <Widget>[
                IconButton(
                  icon: Icon(Feather.paperclip),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              inputDecoration: InputDecoration.collapsed(
                hintText: "Add message here...",
              ),
//                  inputFooterBuilder: () {
//                    return Padding(
//                      padding: EdgeInsets.only(bottom: 50),
//                    );
//                  }
          ),
        ),
      ),
    );
  }

[fayeed]

@poovarasanvasudevan I just released a new version for the package 1.0.7 and it has two new properties inputToolbarPadding & inputToolbarMargin which you can use to add padding & margin to the input container.

[diegogarciar]

hey @poovarasanvasudevan how did you added the maring/paddinng for iPhone X devices only? and what margin/padding amount did you used?

[diegogarciar]

anyways... I ended up using inputFooterBuilder to get the margin and also show continuity all the way to the bottom

   inputFooterBuilder: () {
                  return SafeArea(
                    child: SizedBox(),
                  );
                },

[PolymathWhiz]

I did something like this on the height property:

MediaQuery.of(context).size.height < 700 ? MediaQuery.of(context).size.height - 80 : MediaQuery.of(context).size.height - 120.0,

700 and below is for iPhone 8 and below

[DigitalSolomon]

Has this issue been resolved?

[am-singh]

is there any clean solution?

[diegogarciar]

I'm currently doing

 height: Device.get().isIphoneX
                ? MediaQuery.of(context).size.height - 100
                : null,
inputFooterBuilder: () {
              return SizedBox( height: Device.get().isIphoneX ? 34.0 : 0);
},

[SebastienBtr]

I think this issue can be closed.

[diegogarciar]

What was the solution?

[SebastienBtr]

As mentioned above, since 1.0.7, two new properties inputToolbarPadding & inputToolbarMargin allow you to add padding & margin to the input container.
So it doesn't seem to be an issue related to the package anymore, you'll need to manage yourself the padding/margin as you'll do with any widget to adapt to iOS.
It seems more like a Stack Overflow question right now.

[rlee1990]

Adding padding or margin does not solve the issue it makes a new one for the scroll to bottom will always show even if at the bottom.

[SebastienBtr]

@rlee1990 I think you are referring to #30, it has nothing to do with the input toolbar margin/padding.

[rlee1990]

@rlee1990 I think you are referring to #30, it has nothing to do with the input toolbar margin/padding.

Thanks that is what happens I did choose to just hide it altogether for now