Custom AppBar Flutter

Screenshot:

enter image description here


Code:

  • Using flexibleSpace

    Scaffold(
      appBar: AppBar(
        toolbarHeight: 120, // Set this height
        flexibleSpace: Container(
          color: Colors.orange,
          child: Column(
            children: [
              Text('One'),
              Text('Two'),
              Text('Three'),
              Text('Four'),
            ],
          ),
        ),
      ),
    )
    
  • Using PreferredSize

    Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(120), // Set this height
        child: Container(
          color: Colors.orange,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('One'),
              Text('Two'),
              Text('Three'),
              Text('Four'),
            ],
          ),
        ),
      ),
    )
    

Leave a Comment