Question 125706 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Am I adding radius to the appBar or the Container on this please ? I need the appbar to slant like this

Custom AppBar

return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(150),
        child: AppBar(
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            color: Colors.black,
            onPressed: () {},
          ),
          actions: [
            TextButton(
                onPressed: () {},
                child: Text(
                  'Skip',
                  style: GoogleFonts.halant(
                    textStyle: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                ),
            ),
          ],
          backgroundColor: Colors.amber,
          title: Text(
            'Sign up',
            style: GoogleFonts.halant(
              textStyle: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.w500,
                color: Colors.black
              ),
            ),
          ),
          centerTitle: true,
Tags:

2

Answers


  1. 0

    you don’t need to use AppBar widget to do this, you need to make it manually by assigning a Container to the body of the Scaffold and assign a backGroundImage to the Container. then give the Container a Column as a child and using a Row widget on the top and give it the three children ( the skip text – sign up text – the arrow ) you get the AppBar and for white Container give it a BorderRadius.only

    Login or Signup to reply.
  2. 0

    This is a full example of what you want:

    Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.amber, BlendMode.color),
            child: Image.asset(
              'assets/images/test.jpeg',
              fit: BoxFit.cover,
            ),
          ),
          Column(
            children: [
              AppBar(
                elevation: 0,
                leading: IconButton(
                  icon: Icon(Icons.arrow_back),
                  color: Colors.black,
                  onPressed: () {},
                ),
                actions: [
                  TextButton(
                    onPressed: () {},
                    child: Text(
                      'Skip',
                      style: TextStyle(color: Colors.black),
                    ),
                  ),
                ],
                backgroundColor: Colors.transparent,
                title: Text(
                  'Sign up',
                  style: TextStyle(color: Colors.black),
                ),
                centerTitle: true,
              ),
              Expanded(
                  child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(60)),
                  color: Colors.white,
                ),
              )),
            ],
          )
        ],
      ),
),

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search