skip to Main Content

I am working on flutter on Android studio (hedgehog).
My aim is to write text on a specified position on top of a background image without using textalign property. I have tried using Alignment property and it works fine, but regardless of searching alot I didn’t find resources to position text without text-align property.

Following is my code with text-align property:

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        // appBar: AppBar(
        //   title: Text("Text Over Image"),
        // ),
        body: Center(
          child: Stack(
            children: [
              Container(
                alignment: Alignment.center,
                child: Image.asset(
                  'assets/bckground6.png',
                  height: double.infinity,
                  width: double.infinity,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                  alignment: Alignment.topCenter,
                  child: Text(
                    'Text Over the Image',
                    style: TextStyle(color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 24.0),
                  )),
            ],
          ),
        ),
      ) ,
    );
  }
}

Following is my image of project tree and pubspec.yaml:

tree

pubspec

I have searched regarding alternative of textalign property but whatever I see is people are using textalign property instead of any manual method.
I have also checked documentation but there I saw Align property.

2

Answers


  1. you can use Transform.translate

            Stack(
              children: [
                Container(
                  alignment: Alignment.center,
                  child: Image.network(
                    'https://picsum.photos/200/300?random=1',
                    height: double.infinity,
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),
                ),
                Transform.translate(
                    offset: const Offset(55, 100),
                    child: Text(
                      'Text Over the Image',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24.0),
                    )),
              ],
            )
        
    
    Login or Signup to reply.
  2. If you want to center your text without using text-align-center
    then you wrap your text widget with center

    Center(
      child: Text('...');
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search