CODEWITHSUNDEEP
flutter
Denise
Denise

Reputation: 1088

How to increase the size of the AppBar in scaffold?

My appBar is overflowing when I try to add more widgets to it. It was okay till a certain point, then I wanted to add some upper and lower padding, and then it overflowed. Is there any way I can increase the app Bar Size?

I saw the property preferredSize in docs, however I am unable to use it.

I want my app bar to include a photo icon, some text and another icon in a row. I did in the following way. I know its probably a little crude but wasn't able to figure out any other way. (p.s i tried leading however it didnt give the desired results )

My code : 

return Scaffold(

     appBar: AppBar(
     // preferredSize
      // ERROR: The named paramtere isnt defined 

       title: Column(
         children: <Widget>[,
           Row(
             children: <Widget>[
               SizedBox(width: 10.0),
               Container(
                   width: 50.0,
                   height: 50.0,
                   decoration: new BoxDecoration(
                       shape: BoxShape.circle,
                       image: new DecorationImage(
                           fit: BoxFit.fitWidth,
                           image: new AssetImage('assets/jane.jpg')
                       )
                   )),
               SizedBox(width: 15.0),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   SizedBox(height: 5.0),
                   Text('Good Morning!', style: TextStyle(color: Color(0XFF9c9c9c) , fontWeight: FontWeight.w400, fontSize: 16.0)),
                   Text('Jane Doe ', style: TextStyle(color: Color(0xFF2a2a2a),fontWeight: FontWeight.w700,fontSize: 25.0))
                 ],
               ),
             ],
           ),

         ],
       ),


       bottom: TabBar(
         ...),
     ),      
     body: (...)
     ,);
 } }

enter image description here

Upvotes: 1

Views: 2926

Answers (3)

mabg
mabg

Reputation: 2092

Use a PreferredSize widget on appBar property:

Scaffold(
    appBar: PreferredSize(
        preferredSize: const Size.fromHeight(150.0), // Change 150.0 for your header height
        child: Header()), // Create your Header widget with the title content
    body: ...

Upvotes: 0

Shai
Shai

Reputation: 35

You can do it like this:

AppBar(
 title: Text('Sized App Bar'),
 bottom: PreferredSize(
  child: Text('PreferredSize must have a child'),
  preferredSize: Size.fromHeight(10), //Change 10 to which ever size you desire.
 ),
),

Upvotes: 0

Arthur Khabirov
Arthur Khabirov

Reputation: 146

create custom app bar, like this

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
    CustomAppBar({Key key, this.title}) : preferredSize = Size.fromHeight(56.0), super(key: key);

    @override
    final Size preferredSize;
    final String title;

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

class _CustomAppBarState extends State<CustomAppBar>{

  String get title => widget.title;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      leading: IconButton(
        icon: Icon(Icons.arrow_back_ios, size: 20),
        onPressed: () => Navigator.pop(context),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      titleSpacing: 0,
    );
  }
}

Upvotes: 1

Related Questions