Flutter Layout :- how to build this layout

Question

I want to align the text to the center inside the image as shown in the image. I recently started working with flutter please help me to achieve the layout.

Container(
            width: MediaQuery.of(context).size.width,
            margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
            child: Stack(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.asset(
                    'assets/images/car.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      'Cars',
                      style: TextStyle(
                          fontFamily: 'Welcome',
                          fontSize: 30,
                          color: Colors.white),
                    ),
                  ),
                )
              ],
            ),
          )

With the help of the above code, the text is appearing in the bottom-center instead of the center.

Answer 1

You can design this very easily with the code shown below. You can just add the Google font to style your text and change the image link and text according to your needs.

Center(
        child: Container(
          alignment: Alignment.center,
          height: MediaQuery.sizeOf(context).height * .2,
          width: MediaQuery.sizeOf(context).width * .7,
          decoration: BoxDecoration(
              color: Colors.blue,
              image: const DecorationImage(
                  image: NetworkImage(
                      'https://syska.co.in/blog/wp-content/uploads/2023/07/Syska_Smart_Lights.jpeg'),
                  fit: BoxFit.cover),
              borderRadius: BorderRadius.circular(25)),
          child:  Text(
            '3D',
            style: GoogleFonts.dancingScript(
          textStyle: Theme.of(context).textTheme.displayLarge,
          fontSize: 40,
          color: Colors.white,
          fontWeight: FontWeight.w900,
          fontStyle: FontStyle.italic,
        ),
          ),
        ),
      )

Answer 2

Container(
        width: MediaQuery
            .of(context)
            .size
            .width,
        margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                ///For adding box Shadow
                boxShadow: [
                  BoxShadow(
                    color: Color(0xFF707070),
                    spreadRadius: 2,
                    blurRadius: 5,
                    offset: Offset(2, 3), // changes position of shadow
                  ),
                ],
                borderRadius: BorderRadius.circular(16),

              ),
              ///For image
              child: ClipRRect(
                 borderRadius: BorderRadius.circular(16),

                child: Image.asset(
                    'assets/images/car.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            ///Text 
            Text(
              'Cars',
              style: TextStyle(
                  fontFamily: 'Urbanist',
                  fontSize: 30,
                  color: Colors.white),
            )
          ],
        ),

      ),

Answer 3

    return Container(
      width: MediaQuery
          .of(context)
          .size
          .width,
      margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(16.0),
            child: Image.asset(
              Images.image1,
              fit: BoxFit.cover,
            ),
          ),
          Text(
            'Cars',
            style: TextStyle(
                fontFamily: 'Welcome',
                fontSize: 30,
                color: Colors.white),
          )
        ],
      ),
    );