Search code examples
flutterflutter-layout

Flutter Layout :- how to build this layout


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. 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. layout


Solution

  •     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),
              )
            ],
          ),
        );