I want align text To center of image and and want to add some color overlay to images to make them a bit darker in FLUTTER

Question

This is the what I want to do

I have this code I want to align it but it is not aligning in the center of image

import 'package:flutter/material.dart';
import 'package:sayahat/Widgets/space.dart';

This is list of image url

List stateList = [
  "https://images.unsplash.com/photo-1623082691619-f6cacbdaffa5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1228&q=80",
  "https://images.unsplash.com/photo-1623654197341-a6796eb44591?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
  "https://images.unsplash.com/photo-1579762492894-01b8232f7d45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80",
  "https://images.unsplash.com/photo-1596464148416-e0916276a9f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
  "https://images.unsplash.com/photo-1562913346-61ae3ab9277e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80",
  "https://images.unsplash.com/photo-1598091383021-15ddea10925d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
];

This is list of Text which i want on the center of image

List stateTitle = [
  "Punjab",
  "Sindh",
  "Balochistan",
  "KPK",
  "Gilgit Baltistan",
  "Azad Kashmir"
];

this is Stateless widget

class StatePage extends StatelessWidget {
  const StatePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        child: ListView.builder(
          itemBuilder: (BuildContext ctx, int index) {
            return Container(
              padding: EdgeInsets.all(10),

I am using Inkwell because I want to navigate it when it clicked

              child: InkWell(
                child: Stack(
                  children: [
                    Image.network(stateList[index]),
                    Text(
                      stateTitle[index].toUpperCase(),
                      style: TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.w600),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),

                overlayColor: MaterialStateProperty.all(Colors.blue),
                // borderRadius: BorderRadius.all(Radius.circular(20)),

                // radius: 200.0,
                onTap: () {},
              ),
            );
          },
          itemCount: stateList.length,
        ),
      ),
    );
  }
}

Wrap the `Image.network` with `Center` and `text` wrap to `Positioned` — Anmol Mishra, Jan 24 '22 at 12:59

Navid Shokoufeh · Answer 1 · 2022-01-24T13:16:12.993

1

In Stack Widget use this attribute: alignment: Alignment.center,

Stack(
      alignment: Alignment.center,
         ...
       )

Also for darker images i guess it is useful:

 Image.network(src,
            color: Colors.black.withOpacity(0.2),
            ),

you can change.withOpacity() from (0.0) to (0.9)

edited Jan 24 '22 at 13:16

answered Jan 24 '22 at 13:00

Navid Shokoufeh

341
6
21

I want align text To center of image and and want to add some color overlay to images to make them a bit darker in FLUTTER

1 Answers1