Search code examples
flutterdartflutter-layout

How to adjust the button on the bottom of a screen in flutter, when having SingleChildScrollView?


I want to add adjust my button at the bottom. The problem is, I am using a single ChildScrollView + Column. Even if I add spacer, it takes infinite amount of space in the widget. However it sure does work with singleChildScrollView, but then pixel overflow error occurs.

I want to add adjust my button at the bottom

Below is my code.

body: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Form(
      key: _form,
      child: SingleChildScrollView(
        child: Column(children: <Widget>[
          //  Works in form only.
          //  We dont need focusNode or focusScope. Since we are in new version.
          TextFormField(
            decoration: InputDecoration(labelText: 'Title'),
            textInputAction: TextInputAction.next, //  Moves to next field.
            keyboardType: TextInputType.name,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: value,
                description: _editedProduct.description,
                price: _editedProduct.price,
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Price (\$)'),
            textInputAction: TextInputAction.next, //  Moves to next field.
            keyboardType: TextInputType.number,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: _editedProduct.title,
                description: _editedProduct.description,
                price: double.parse(value),
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Description'),
            maxLines: 3,
            //  Since we dont need to move to next control.
            // textInputAction: TextInputAction.next,            //  Moves to next field.
            keyboardType: TextInputType.multiline,
            onSaved: (value) {
              _editedProduct = Product(
                id: null,
                title: _editedProduct.title,
                description: value,
                price: _editedProduct.price,
                imageUrl: _editedProduct.imageUrl,
              );
            },
          ),
          Divider(),
          Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  margin: EdgeInsets.only(top: 8, right: 10),
                  decoration: BoxDecoration(
                      border: Border.all(
                    width: 1,
                    color: Colors.grey,
                  )),
                  child: Container(
                    child: _imageUrlController.text.isEmpty
                        ? Text('Enter a URL')
                        : FittedBox(
                            child: Image.network(_imageUrlController.text),
                            fit: BoxFit.fill,
                          ),
                  ),
                ),
                Expanded(
                  child: TextFormField(
                    decoration: InputDecoration(labelText: 'Image URL'),
                    keyboardType: TextInputType.url,
                    textInputAction: TextInputAction.done,
                    controller: _imageUrlController,
                    focusNode: _imageUrlFocusNode,
                    onFieldSubmitted: (value) => _submitForm(),
                    onSaved: (value) {
                      _editedProduct = Product(
                        id: null,
                        title: _editedProduct.title,
                        description: _editedProduct.description,
                        price: _editedProduct.price,
                        imageUrl: value,
                      );
                    },
                  ),
                ),
              ]),
          Container(
            width: double.infinity,
            height: 50,
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.all(Radius.circular(20))),
            child: FlatButton(
              child: Text(
                'Submit',
                // ignore: deprecated_member_use
                style: Theme.of(context).primaryTextTheme.title,
              ),
              onPressed: (_submitForm),
            ),
          ),
        ]),
      ),
    ),
  ),

Solution

  • Add bottomsheet inside scaffold widget

    Scaffold(bottomSheet: submitButton(), body : formWidget())