时间戳

首页 > 解决方案 > 如何在颤动中将文本放在svg图像上

flutter - 如何在颤动中将文本放在svg图像上

问题描述

我有一行包含两个 svg 图像和两个文本。我希望一些文字应该出现在 svg 图像上。请帮助我。提前谢谢你

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

标签： flutter

解决方案

您可以将Stack小部件与alignment: Alignment.center. Alignment.center将所有孩子Stack从其中心居中。

小的独立示例：

演示

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

推荐阅读