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,
        ),
      ),
    );
  }
}

Answer 1

most elegant way.

You can simply use the alignment option present in Stack

child: Stack(
  alignment: Alignment.center
)

OR

A Stack allows you to stack elements on top of each other, with the last element in the array taking the highest priority. You can use Align, Positioned, or Container to position the children of a stack.

Align

alignment with Alignment, which has static properties like top center, bottomRight, and so on. Or you can take full control and set Alignment(5.0, -5.0), which takes x,y values ranging from 5.0 to -5.0, with (0,0) being the center of the screen.

Stack(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        ),
        Container(
          alignment: Alignment.bottomCenter,
          // alignment: Alignment(1.0, -1.0),
          child: Container(
              height: 100,
              width: 100, color: Colors.blueAccent
          ),
        )
      ]
  )

Answer 2

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)