Hemavathi
Hemavathi

Reputation: 203

How to place image & textfiled both at center in flutter

How to place image & textfield both at center in flutter.

Below is code what i have tried so far any help is appreciated!

Container(
  child: Padding(
    padding: const EdgeInsets.only(top: 32.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          child: Image.asset(
            'images/Warning.png',
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 8.0),
          child: Container(
            alignment: Alignment.center,
            child: Text(
              'OTP is valid for 5 minutes only.',
              style: TextStyle(
                color: Color(0xFF4B4B4B),
                fontSize: 12,
                fontFamily: 'Soleil_Regular',
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

trying as some thing shown in the picture both text & image is in same line any help is appreciated!

Upvotes: 1

Views: 371

Answers (2)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

Simple way of doing it by using RichText

     RichText(
              textAlign: TextAlign.center,
              text: TextSpan(children: [
                WidgetSpan(child: Icon(Icons.ac_unit)), // use image in your case instead of icon
                TextSpan(text: "This is Text")
              ]))

Full Snippet

     Container(
                child: Padding(
                  padding: const EdgeInsets.only(top: 32.0),
                  child: Text.rich(TextSpan(
                    style: TextStyle(
                        color: Color(0xFF4B4B4B),
                        fontSize: 12,
                        fontFamily: 'Soleil_Regular'),
                    children: [
                      WidgetSpan(
                        child: Image.asset(
                          'images/Warning.png',
                          alignment: Alignment.center,
                        ),
                      ),
                      WidgetSpan(
                          child: SizedBox(
                        width: 10,
                      )),
                      TextSpan(
                        text: 'OTP is valid for 5 minutes only.',
                      ),
                    ],
                  )),
                ),
              ),

Upvotes: 1

Diwyansh
Diwyansh

Reputation: 3514

Give your image a size and you will get your result

Container(
            child: Padding(
              padding: const EdgeInsets.only(top: 32.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    child: Image.network(
                      'http://orbitsystemsinc.com/images/banner-round-bg.png',width: 40,height: 40,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        'OTP is valid for 5 minutes only.',
                        style: TextStyle(
                          color: Color(0xFF4B4B4B),
                          fontSize: 12,
                          fontFamily: 'Soleil_Regular',
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )

enter image description here

Upvotes: 0

Related Questions