CODEWITHSUNDEEP
flutter
Pritham Bnr
Pritham Bnr

Reputation: 929

how to put text over svg images in row in flutter

i have a row which contains two svg images and two text. i want some text should appear over svg images. please help me.thank you in advance

final heading_register=new Container(
  color:   const Color(0xFF008000),
  padding: const EdgeInsets.all(5.0),
  child: Row(

    children: <Widget>[

      Stack(
          children: <Widget>[
            svgIcon,
            Center(child: Text("1")),
          ]
      ),


      Expanded(
        child: Text('New Registartion',style: new TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16.0),),
      ),
      Stack(
          children: <Widget>[
            svgIcon,
            Text("1",textAlign: TextAlign.end,),
          ]
      ),
      Expanded(
        child: Text('Total Registartion',style: new TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16.0),),
      ),
    ],
  ),
);

Upvotes: 1

Views: 4134

Answers (1)

NiklasPor
NiklasPor

Reputation: 9805

You can use the Stack widget with alignment: Alignment.center. Alignment.center centers all children from the Stack in its center.

Small standalone example:

Demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String example = 'The quick brown fox jumps over the lazy dog';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconWithText(text: 'Home', icon: Icons.home),
              IconWithText(text: 'Car', icon: Icons.directions_car)
            ],
          ),
        )
      ),
    );
  }
}

class IconWithText extends StatelessWidget {
  final IconData icon;
  final String text;

  IconWithText({this.icon, this.text});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Icon(icon, color: Colors.red, size: 60.0,),
        Text(text, style: TextStyle(fontSize: 30.0),)
      ],
    );
  }
}

Upvotes: 2

Related Questions