mercredi 16 juin 2021

Flutter - how to use SingleScrollView() to Scroll Entire Screen when Keyboard Appears not just text automatically

Even After using SingleChildScrollView() as main Parent, still only the text field is shifted up, but i need to shift up the Login button as well.

The output of my code is Left image but i need the result of right.

I have used Material to custom made a Button.

enter image description here

import 'package:flutter/material.dart';

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

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

class _LoginPageState extends State<LoginPage> {
  ...
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        // color: Colors.white,
        body: Center(
          child: SingleChildScrollView(
              child: Form(
            key: _formKey,
            child: Column(
              children: [
                Image.asset(
                  "assets/images/login.png",
                  fit: BoxFit.cover,
                  height: 100,
                ),
                SizedBox(height: 24.0),
                Text(...)),
                SizedBox(
                  height: 20.0,
                ),
                Padding(
                  // padding: const EdgeInsets.all(16.0),  //everywhere padding
                  padding: const EdgeInsets.symmetric(
                      vertical: 16.0, horizontal: 20.0),
                  child: Column(
                    children: [
                      TextFormField(
                          decoration: InputDecoration(
                          ),
                          
                      TextFormField(
                         ...
                          ),],),),
                SizedBox(
                  height: 20.0,
                ),

                Material(
                  color: Colors.deepPurple,
                  borderRadius: BorderRadius.circular(changeButton ? 50 : 8),
                  child: InkWell(
                    // splashColor: Colors.redAccent,
                    onTap: () => moveToHome(context),
                    child: AnimatedContainer(
                      ....
                            ),
                    ),

Aucun commentaire:

Enregistrer un commentaire