Question 76203 in Flutter Question posted in
The official Flutter documentation can be found here.

Slide page up 24px above keyboard (Flutter)

I would like to create a page and some widgets in the center. There is one textfield among
the widgets. When I tap it, I want the popping keyboard move the page upwards and have 24px between
the keyboard and the closest widget.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


class RegistrationPage_ extends StatefulWidget {
  const RegistrationPage_({Key? key}) : super(key: key);

  @override
  State<RegistrationPage_> createState() => _RegistrationPage_State();
}

class _RegistrationPage_State extends State<RegistrationPage_> {
  @override
  Widget build(BuildContext context) {

//
// Please register text
//
    var qeydiyyatdanKec = const Text(
      'Please reigster',
      style: TextStyle(
        fontFamily: 'VisbyCF_Bold',
        fontWeight: FontWeight.w700,
        fontSize: 22,
        height: 1,
        color: Colors.black,
      ),
    );

//
// sized box for creating some horizontal space
//
    var sizedBox1 = SizedBox(height: 16);

//
// Info title text
//
    var infoTxt = const Text(
      'Reigstration needed',
      style: TextStyle(
        fontFamily: 'VisbyCF_DemiBold',
        fontWeight: FontWeight.w600,
        fontSize: 14,
        height: 1.25,
        color: Color.fromRGBO(153, 153, 153, 1),
      ),
    );

//
// sized box for creating some horizontal space
//
    var sizedBox2 = SizedBox(height: 32);

// 
// Textfield title
//
    var mobilNomreTxt = const Text(
      ' Mobile',
      style: TextStyle(
        fontFamily: 'VisbyCF_DemiBold',
        fontWeight: FontWeight.w600,
        fontSize: 12,
        height: 1.25,
        color: Color.fromRGBO(179, 179, 179, 1),
      ),
    );

//
// sized box for creating some horizontal space
//
    var sizedBox3 = SizedBox(height: 6);

//
// Textfield wrapped inside container
//
    var mobilNomreInput = Container(
      decoration: BoxDecoration(
        border: Border.all(),
        color: Color.fromRGBO(248, 248, 248, 1),
      ),
      height: 58,
      width: MediaQuery.of(context).size.width,
      child: const TextField(
        autofocus: true,
        keyboardType: TextInputType.number,
        style: TextStyle(
          fontFamily: 'VisbyCF_DemiBold',
          fontWeight: FontWeight.w600,
          fontSize: 14,
          height: 1.25,
          color: Colors.black,
        ),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(left: 20),
          border: InputBorder.none,
          hintText: '',
          hintStyle: TextStyle(
            fontFamily: 'VisbyCF_DemiBold',
            fontWeight: FontWeight.w600,
            fontSize: 14,
            height: 1.25,
            color: Color.fromRGBO(179, 179, 179, 1),
          ),
        ),
      ),
    );

//
// sized box for creating some horizontal space
/
//
    var sizedBox4 = const SizedBox(
      height: 32,
    );

//
// The only button on the page, the last widget
//
    var bottomButton = Container(
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      child: TextButton(
        onPressed: () {},
        child: Text('Continue'),
      ),
    );

    //
    // Calculating the height of the main block
    //
    var contHeight = 73 + 143 + 58;
    var screenHeight = MediaQuery.of(context).size.height;


    //
    // Tried listview hoping it would work
    // Putting all elements inside the listview
    // Tried to specifically set some heights to make it work

    var listView = Padding(
      padding: const EdgeInsets.only(left: 24, right: 24, bottom: 50),
      child: ListView(
        children: [
          SizedBox(height: (screenHeight - contHeight) / 2),
          qeydiyyatdanKec,
          sizedBox1,
          infoTxt,
          sizedBox2,
          mobilNomreTxt,
          sizedBox3,
          mobilNomreInput,
          sizedBox4,
          bottomButton,
          SizedBox(height: 88),
        ],
      ),
    );

    return listView;

  }
}

//
// Main function
//   shows widgets in the center
//
main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: RegistrationPage_(),
      ),
    ),
  );
}

Also tried with column plus Expanded(Container()) both on top and bottom, but when I tap the textfield the page first goes down and the up, which looked weird.

Tags:

2

Answers


  1. 0

    Change your main like this:

    main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: RegistrationPage_(),
      ),
    ),
  );
}

    and use this padding for textfield or widget you want keyboard below it:

    padding: EdgeInsets.only(
  // this padding is added to move layout up when keyboard is open
  bottom: MediaQuery.of(context).viewInsets.bottom,
),

    tip: you can add some number to bottom padding if you want.

    Login or Signup to reply.
  2. 0

    To get a better idea, [follow this reference link]

    https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html

    main() async {
    runApp( 
           MaterialApp( 
                   home: Scaffold( 
                                  resizeToAvoidBottomInset : false,
                                  body: RegistrationPage_(),
                                            ),
                               ),
                  );

    }

    Note: Using resizeToAvoidBottomInset: false the page automatically scrolls when the keyboard is visible and for 24px you need to add padding to the last widget

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search