How to make the bottom bar move up with the keyboard (flutter)

Question

I am trying to have my chat bar (text field, the 2 buttons and the black bar behind the text field) rise up with the keyboard when it's engaged.

I have tried the following:

Wrapping the Stack with all the elements in a Positioned widget using bottom: MediaQuery.of(context).viewInsets.bottom, however, if i do this it gets rid of the 2 buttons and the black bar and does not raise the textfield when the keyboard is engaged.
Padding the stack using bottom: MediaQuery.of(context).viewInsets.bottom, This causes the same undesirable outcome as above in #1
Wrapping the stack in a single child scrollview: Move textfield up when keyboard appears in Flutter if i wrap the stack in a singlechildscrollview it does not move when the keyboard is engaged.

If anybody can guide me in the right direction, perhaps I'm wrapping them in the wrong widget or I have to use an animation to move the stack up.

the code is below:

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'main.dart';
import 'recurringwidgets/size_config.dart';



class ChatDemo extends StatefulWidget {


  ChatDemo();

  @override
  _ChatDemoState createState() => _ChatDemoState();
}

class _ChatDemoState extends State with RouteAware {

  double scrollMark;
  @override
  void initState() {
 
  }

  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.purple[300],
        resizeToAvoidBottomInset: false,
        //resizeToAvoidBottomPadding: true,

        body: SafeArea(
    bottom: false,
    top: false,
    child: //Column(
          //mainAxisAlignment: MainAxisAlignment.spaceAround,
          //children: [

          Stack(
      children: [
          
            //header(context, "Chat"),
            //EdgeInsets.fromLTRB(2.5, 184, 2.5, 126),
            //padding: EdgeInsets.only(top:105),
            GestureDetector(
              onTap: () => FocusScope.of(context).unfocus(),
              child: Container(
              ),
            ),
Positioned(
  
  child:   Padding(
    padding: EdgeInsets.only(top: 750 * SizeConfig.heightRatio,  ),
    child: SingleChildScrollView(
          child: Stack(
        children: [
  Positioned(
      top: 22.5 * SizeConfig.heightRatio,
      bottom: 0,
      child: ClipRRect(
        borderRadius: BorderRadius.only(
              topLeft: Radius.circular(32.0),
              topRight: Radius.circular(32.0),
        ),
        child: ClipRect(
              //clipBehavior: Clip.antiAlias,
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(
                  sigmaX: 20,
                  sigmaY: 20,
                ),
                child: Transform.translate(
                  offset: Offset(0, 20 * SizeConfig.heightRatio),
                  child: Container(
                    constraints: BoxConstraints(
          maxHeight: 75,
          minHeight: 42,
                    ), //height: 42,
                    width: SizeConfig.screenWidth,
                    decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(32.0),
              topRight: Radius.circular(32.0),
          ),
          color:
                const Color(0xFF000000)//.withOpacity(0.00),
                    ),
                  ),
                ),
              ),
        ),
      ),
              ),
        Row(
               mainAxisSize: MainAxisSize.max,
               mainAxisAlignment: MainAxisAlignment.spaceAround,
        children:[
              Padding(
      padding: EdgeInsets.only(left:20.0,bottom: (10)),
      child: Container(
        decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(27.5),
        boxShadow: [
        BoxShadow(
      color: const Color(0x29000000),
      offset: Offset(3, 3),
      blurRadius: 6,
        ),
        ],
  ),
        child: CircleAvatar( ///radius 22
      backgroundColor: Color(0xffffffff),
      radius: 22,
      child: SvgPicture.string(
  _svg_nznkw8,
  allowDrawingOutsideViewBox: true,
  fit: BoxFit.fill,
              ),
  
              
        ),
      ),
              ),
  Flexible(
  flex:6,
        child: Container(
              
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(right:20.0,bottom: 10),
        child: Container(
              decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(27.5),
        boxShadow: [
        BoxShadow(
              color: const Color(0x29000000),
              offset: Offset(3, 3),
              blurRadius: 6,
        ),
        ],
        ),
              child: CircleAvatar( ///radius 22
              backgroundColor:Color(0xffffffff) ,
              radius: 22,
              child: SvgPicture.string(
  _svg_52blhh,
  allowDrawingOutsideViewBox: true,
  fit: BoxFit.fill,
              ),),
        ),
      ),
  
        ], 
        ),
         
        
        ],
        ),
    )
  ),
),

 Padding(
        padding: EdgeInsets.only(top:760*SizeConfig.heightRatio,left:60,),
        child: Container(
            //margin: EdgeInsets.only(top:760),
            child: ChatBubble()),
                  ),
      ],
    ),
          ),
      );
  }
}

class ChatBubble extends StatefulWidget {
  const ChatBubble({
    Key key,
  }) : super(key: key);

  @override
  ChatBubbleState createState() => ChatBubbleState();
}

class ChatBubbleState extends State {
  @override
  Widget build(BuildContext context) {
    final TextEditingController myController = TextEditingController();
    //builds the bar
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Container(
        //margin: EdgeInsets.only(top:13,bottom: 5),
        //color: Colors.blue,
        /*constraints: BoxConstraints(
            maxHeight: 176,
          ),*/
        //height: chatBarHeight,
        constraints: BoxConstraints(
          maxHeight: 176,
          minHeight: 47.5, //52.5
        ),
        width: 240.0 * SizeConfig.widthRatio, ///310
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(27.5),
          //color: Colors.blue,
          color: const Color(0xffffffff),
          boxShadow: [
            BoxShadow(
              color: const Color(0x29000000),
              offset: Offset(3, 3),
              blurRadius: 6,
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.only(
              left: 12 * SizeConfig.widthRatio,
              right: 12 * SizeConfig.widthRatio,
              top: 13 * SizeConfig.heightRatio,
              bottom: 5 * SizeConfig.heightRatio),
          child: TextFormField(
            textAlign: TextAlign.start,
            style: TextStyle(
                fontSize: 17 ,
                color: const Color(0xd9343f4b),
                fontFamily: 'Lato'),
            //textAlign: TextAlign.left,
            maxLines: null,
            textCapitalization: TextCapitalization.sentences,
            controller: myController,
            decoration: InputDecoration.collapsed(
                hintStyle: TextStyle(
                  color: Color(0x80343f4b),
                  fontFamily: 'Lato',
                  fontSize: 15 ,
                  //color: const Color(0xd9343f4b),
                ),
                // hintStyle: ,
                hintText: 'Enter Comment'),
          ),
        ),
      ), //Padding
      //),
    );
  }
}




const String _svg_52blhh = //send
    '';
const String _svg_nznkw8 =
    '';

How to make the bottom bar move up with the keyboard (flutter)

Answers (1)

Related Questions