decorationbox in appbar with special background

Question

I am a beginner Flutter developer I am going to implement a program similar to the picture below This part of the appbar is an application that I planned to implement using the decoration box, but I did not succeed

  appBar: AppBar(
    backgroundColor: Colors.red[700],
    actions: [getAppbarActions()],
  ),
Widget getAppbarActions() {
  return Expanded(
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: DecoratedBox(
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(10)),
            child: Row(
              // mainAxisSize: MainAxisSize.max,
              children: [
                Image(
                  image: AssetImage('images/1.png'),
                  width: 40,
                  alignment: Alignment.centerLeft,
                  // height: 15,
                ),
                Text(
                  'hi',
                  textAlign: TextAlign.end,
                  style: TextStyle(color: Colors.black),
                ),
                // Text('hi'),
                // Text('hi'),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

Answer 1

actually you dont need the use appbar to achieve the desired behaviour. You can simply pass Stack() widget to Scaffold's body parameter.

Example output

scrollable Content

Such as :

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          //Stack for your desired behaviour
          SizedBox(
            height: 220,

            //stack
            child: Stack(
              children: [
                Container(
                  width: double.maxFinite,
                  height: 150,
                  color: Colors.red,
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin: EdgeInsets.all(8),
                    width: double.maxFinite,
                    height: 120,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            blurRadius: 10),
                        BoxShadow(
                          color: Colors.black.withOpacity(0.3),
                          spreadRadius: -2,
                          blurRadius: 5,
                        ),
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        //this part is your asset and the other part of the container childrens
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: FlutterLogo(
                            size: 80,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 32.0, vertical: 8),
                          child: Column(
                            children: [
                              Text(
                                "Hi",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                "Hi",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.bold),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),


          /// REST of your code
        Expanded(
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.blue,
                ),
                margin: EdgeInsets.all(10),
                height: 80,
                child: Center(child: Text("Content Number ${index}")));
          },
        ),
      )
       
       
        ],
      ),
    );
  }

Second Approach :

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          //Stack for your desired behaviour
          SizedBox(
            height: 220,

            //stack
            child: Stack(
              children: [
                Container(
                  width: double.maxFinite,
                  height: 150,
                  color: Colors.red,
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin: EdgeInsets.all(8),
                    width: double.maxFinite,
                    height: 120,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(15),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            blurRadius: 10),
                        BoxShadow(
                          color: Colors.black.withOpacity(0.3),
                          spreadRadius: -2,
                          blurRadius: 5,
                        ),
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        //this part is your asset and the other part of the container childrens
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: FlutterLogo(
                            size: 80,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 32.0, vertical: 8),
                          child: Column(
                            children: [
                              Text(
                                "Hi",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                "Hi",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.bold),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                  children: _faqData
                      .map(
                        (e) => Container(
                          height: 100,
                          margin: EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                  color: Colors.black.withOpacity(0.3),
                                  blurRadius: 10),
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                spreadRadius: -2,
                                blurRadius: 5,
                              ),
                            ],
                          ),
                        ),
                      )
                      .toList()),
            ),
          )

          /// REST of your code
        ],
      ),
    );
  }