Question 361659 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make a hovering appbar in flutter?

What I want to achieve is the following image:
enter image description here

I tried resizing the appbar but it didn’t work:

      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(60.0),
        child: Container(
          margin: EdgeInsets.all(8.0),
          child: AppBar(
            title: Text('Login'),
          ),
        ),
      ),

enter image description here

Tags:

2

Answers


  1. 0

    Try like this:

    appBar: PreferredSize(
  preferredSize: const Size.fromHeight(60.0),
  child: ClipRRect(
    borderRadius: const BorderRadius.vertical(
      bottom: Radius.circular(50),
    ),
    child: AppBar(
      title: const Text('Login'),
      backgroundColor: Colors.red,
    ),
  ),
)

    Result:
    enter image description here

    Login or Signup to reply.
  2. 0

    Try below code:

    Using AppBar: AppBar

    appBar: AppBar(
    backgroundColor: Colors.orangeAccent,
    centerTitle: true,
    title: Text('Appoinments'),
    leading: IconButton(
      onPressed: () {},
      icon: Icon(Icons.menu),
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.date_range),
      ),
    ],
  ),

    Result: enter image description here

    Using PreferredSize: PreferredSize

    appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50.0),
        child: ClipRRect(
          borderRadius: const BorderRadius.vertical(
            bottom: Radius.circular(30),
          ),
          child: AppBar(
            backgroundColor: Colors.orangeAccent,
            centerTitle: true,
            title: Text('Appoinments'),
            leading: IconButton(
              onPressed: () {},
              icon: Icon(Icons.menu),
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                bottom: Radius.circular(30),
              ),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.date_range),
              ),
            ],
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search