Search code examples
androidflutterandroid-actionbar

Add some space between action bar and title in Flutter


How can I add some space between action bar and title textField ?

AddWorkRequest

class AddWorkRequest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white
      ),
      child: AddWorkRequestForm(),
    );
  }
}

AddWorkRequestForm

class AddWorkRequestForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _AddWorkRequestPage();
  }
}

class _AddWorkRequestPage extends State<AddWorkRequestForm> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Add Work Request"),
        ),
        body: new Column(
          children: <Widget>[
            titleField(),
            Container(margin: EdgeInsets.only(top: 10.0, bottom: 5.0)),
            detailDescriptionField(),
            Container(margin: EdgeInsets.only(top: 10.0, bottom: 5.0)),
            locationField(),
            Container(margin: EdgeInsets.only(top: 10.0, bottom: 5.0)),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                child: Text(
                  'Photos',
                  style: new TextStyle(fontSize: 20.0, fontFamily: 'Roboto'),
                ),
              ),
            )
          ],
        ));
  }

  Widget detailDescriptionField() {
    return StreamBuilder(builder: (context, snapshot) {
      return TextFormField(
          decoration: InputDecoration(
            labelText: StringConstant.detailDescription,
            border: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(10.0),
                borderSide: BorderSide()),
          ));
    });
  }

  Widget locationField() {
    return StreamBuilder(builder: (context, snapshot) {
      return TextFormField(
          decoration: InputDecoration(
            labelText: StringConstant.location,
            border: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(10.0),
                borderSide: BorderSide()),
          ));
    });
  }

  Widget titleField() {
    return StreamBuilder(builder: (context, snapshot) {
      return TextFormField(
          decoration: InputDecoration(
            labelText: StringConstant.title,
            border: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(10.0),
                borderSide: BorderSide()),
          ));
    });
  }
}

Solution

  • You can wrap titleField() widget in Padding and provide only top padding to have more space between action bar and the field, as below:

    Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: titleField()
                ),
                Container(margin: EdgeInsets.only(top: 10.0, bottom: 5.0)),
    

    Output is:

    enter image description here

    Hope this answers your question.