Debug School

rakesh kumar
rakesh kumar

Posted on

How to positioned image or text center horizontally in flutter

Problem:

Image description

I have to bring text triptitle family holiday in center
TASK
Image description
Solutions:

Stack(
  alignment: Alignment.center, // <---------
  children: [
    Text('Some text'),
    // Other widgets
  ],
),
Enter fullscreen mode Exit fullscreen mode
Stack(

alignment: Alignment.center,
            children: <
            Widget>[
              Container(
                height: displayHeight(context) * 0.24,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black26,
                          offset: Offset(0.0, 2.0),
                          blurRadius: 6.0)
                    ]),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Image(
                      height: displayHeight(context) * 0.08,
                      width: displayWidth(context) * 0.32,
                      image: NetworkImage(
                        widget.image != null
                            ? 'https://' +
                                widget.image
                            : "Not Found",
                      ),
                      fit: BoxFit.cover),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                child: Row(children: <Widget>[
                  IconButton(
                      icon: Icon(Icons.arrow_back_ios),
                      iconSize: 30.0,
                      color: Colors.white,
                      onPressed: () => Navigator.pop(context)),
                ]),
              ),
              Positioned(

                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(

                          decoration: const BoxDecoration(
                            color: Colors.white,
                 borderRadius: BorderRadius.all(Radius.circular(15)),
                              ),
                        child: Text(
                          widget.data.length > 20?widget.data.substring(0, 20)+ "..":widget.data,
                          style: TextStyle(
                              fontSize: displayWidth(context) * 0.070,                            
                              color: Colors.black,                            
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ]),
              ),
            ],
          ),
Enter fullscreen mode Exit fullscreen mode

Image description
clik here for Refrence

Full Summary:
How to flutter image positioned center horizontally
Stack--alignment, children(Text)
How to set backgroundcolor of text in flutter
Container---decoration,Text
Text--style(fontSize,color,fontWeight)
How to add substring range in Flutter if the word is less than the range

Top comments (0)