У меня есть раздел с прокруткой формы, но прокрутка не работает должным образом в флаттере

Question

Я получаю эту полосу внизу со словами «Низ переполнен на 27 пикселей».

Вот как выглядит мой пользовательский интерфейс

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {


    final fullname = TextFormField(
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.person_outline, size: 30.0, color: Colors.white),
        labelText: "FULL NAME",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    final username = TextFormField(
      keyboardType: TextInputType.emailAddress,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.alternate_email, size: 30.0, color: Colors.white),
        labelText: "EMAIL ADDRESS",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );



    final mobilenumber = TextFormField(
      keyboardType: TextInputType.number,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.phone_android, size: 30.0, color: Colors.white),
        labelText: "MOBILE NUMBER",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    final registerButton = Padding(
      padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),

      child: FlatButton(
      shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
      padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),  
       onPressed: (){

       },
       color: Colors.pink,
       child: Text("Register", style: TextStyle(color: Colors.white, fontSize: 18.0)),
      ),
    );

    final password = TextFormField(
      obscureText: true,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
        labelText: "PASSWORD",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );
    final repassword = TextFormField(
      obscureText: true,
      style: TextStyle(color: Colors.white, fontSize: 17.0),
      decoration: InputDecoration(
        icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
        labelText: "RE-TYPE PASSWORD",
        labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
        contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
        border: InputBorder.none,
      ),
    );

    List<DropdownMenuItem<String>> genderNames = [];
    String selectedItem;
    void loadGenders(){
      genderNames = [];
      genderNames.add(new DropdownMenuItem(child: new Text("Male"), value: "male",));
      genderNames.add(new DropdownMenuItem(child: new Text("Female"), value: "female"));
    }
    loadGenders();

    final genderDropDown = Container(

        child : Row(
          children: <Widget>[
            Icon(Icons.wc, size: 30.0, color: Colors.white),
            SizedBox(width: 15.0),
            DropdownButtonHideUnderline(
              child: DropdownButton(
                value: selectedItem,
                items: genderNames, 
                hint: Text("SELECT GENDER"),
                iconSize: 40.0,
                onChanged: (value) {
                  selectedItem = value;
                  setState(() {
                  });

                },
              ),
            )

          ],
        )
    );


    final inputboarder = new Container(
        height: 1.0,
        margin: EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: new AssetImage("assets/transparentborder.png"),
          )
        ),     
    );

    final appbar = Stack(
      children: <Widget>[
        AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text("Create Account"),
        )
      ],
    );

    return Scaffold(


       body : Container( 
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new AssetImage("assets/Social-free-psd.jpg"),
            fit: BoxFit.fill,
          ),
        ),
        child: NestedScrollView(

            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                new SliverAppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0.0,
                  pinned: true,
                  title: new Text('Flutter Demo'),
                ),
              ];
            },

            body: Column(
              children: <Widget>[

              Container( 
                padding: EdgeInsets.only(left: 40.0, right: 40.0),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    SizedBox(height: 58.0),

                    fullname,
                    inputboarder,
                    SizedBox(height: 28.0),

                    username,
                    inputboarder,
                    SizedBox(height: 28.0),
                    password,
                    inputboarder,
                    SizedBox(height: 28.0),
                    repassword,
                    inputboarder,

                    SizedBox(height: 28.0),
                    mobilenumber,
                    inputboarder,

                    SizedBox(height: 28.0),
                    genderDropDown,
                    inputboarder,

                    SizedBox(height: 28.0),
                    registerButton
                  ],
            )

                ),


            ],

        ),
       )
      ),
    );
  }
}

Я не уверен, в чем проблема, я новичок, чтобы трепетать.Но это похоже на ошибку отладки.Я правильно понял?Даже если это так, как я могу решить эту проблему?

Это начало приходить, когда я поместил «NestedScrollView» для прокрутки формы.Я думаю, ListView внутри ListView не обеспечивает поведение прокрутки по умолчанию.

Любые предложения будут полезны.

Спасибо!

Answer 1

Итак, я сделал несколько изменений в вашем коде, чтобы я мог быстро скомпилировать его и помочь вам.(если вы скопируете и вставите мой код сюда, не забудьте изменить ваши активы под ваши нужды)

Сначала я сделал это StatlessWidget для своих нужд, но вы можете оставить его как StatefulWidget.

Затем я включил ваш appBar в сам Scaffold.Тогда child вашего Scaffold должно быть Stack, чтобы вы могли складывать все свои различные TextFormField и прокручивать экран.

Возможно, вам придется заменить return new MaterialApp( home:часть к return new Scaffold.

Вот код:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


final fullname = TextFormField(
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.person_outline, size: 30.0, color: Colors.white),
    labelText: "FULL NAME",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final username = TextFormField(
  keyboardType: TextInputType.emailAddress,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.alternate_email, size: 30.0, color: Colors.white),
    labelText: "EMAIL ADDRESS",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final mobilenumber = TextFormField(
  keyboardType: TextInputType.number,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.phone_android, size: 30.0, color: Colors.white),
    labelText: "MOBILE NUMBER",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final registerButton = Padding(
  padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),

  child: FlatButton(
  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
  padding: EdgeInsets.fromLTRB(0.0, 20.0, 0.0, 20.0),  
   onPressed: (){

   },
   color: Colors.pink,
   child: Text("Register", style: TextStyle(color: Colors.white, fontSize: 18.0)),
  ),
);

final password = TextFormField(
  obscureText: true,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
    labelText: "PASSWORD",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

final repassword = TextFormField(
  obscureText: true,
  style: TextStyle(color: Colors.white, fontSize: 17.0),
  decoration: InputDecoration(
    icon: Icon(Icons.lock_outline, size: 30.0, color: Colors.white),
    labelText: "RE-TYPE PASSWORD",
    labelStyle: TextStyle(color: Colors.white, height: 0.5, fontSize: 15.0),
    contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0,15.0),
    border: InputBorder.none,
  ),
);

List<DropdownMenuItem<String>> genderNames = [];
String selectedItem;
void loadGenders(){
  genderNames = [];
  genderNames.add(new DropdownMenuItem(child: new Text("Male"), value: "male",));
  genderNames.add(new DropdownMenuItem(child: new Text("Female"), value: "female"));
}
loadGenders();

final genderDropDown = Container(

    child : Row(
      children: <Widget>[
        Icon(Icons.wc, size: 30.0, color: Colors.white),
        SizedBox(width: 15.0),
        DropdownButtonHideUnderline(
          child: DropdownButton(
            value: selectedItem,
            items: genderNames, 
            hint: Text("SELECT GENDER"),
            iconSize: 40.0,
            onChanged: (value) {
              selectedItem = value;
              /*setState(() {
              });*/

            },
          ),
        )

      ],
    )
);


final inputboarder = new Container(
    height: 1.0,
    margin: EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0),
    decoration: BoxDecoration(
      image: DecorationImage(
        image: new AssetImage("assets/tmp/birds.jpg"),
      )
    ),     
);


return new MaterialApp(
  home:
 new Scaffold(
    appBar: new AppBar(
        title: new Text('Flutter Demo'),
        elevation: 0.0,
        backgroundColor: Colors.transparent, 
        //Something to pin the appbar
   ),
    body : Container( 
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("assets/tmp/birds.jpg"),
        fit: BoxFit.fill,
      ),
    ),
    child:  new Stack(
          children: <Widget>[

          Container( 
            padding: EdgeInsets.only(left: 40.0, right: 40.0),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                SizedBox(height: 58.0),

                fullname,
                inputboarder,
                SizedBox(height: 28.0),

                username,
                inputboarder,
                SizedBox(height: 28.0),
                password,
                inputboarder,
                SizedBox(height: 28.0),
                repassword,
                inputboarder,

                SizedBox(height: 28.0),
                mobilenumber,
                inputboarder,

                SizedBox(height: 28.0),
                genderDropDown,
                inputboarder,

                SizedBox(height: 28.0),
                registerButton
              ],
        )

            ),


        ],
    ),
    ),
   )
  );
  }
}

Надеюсь, это поможет вам,