How to get Text on top of an Image?

This Article is posted by seven.srikanth at 8/28/2018 5:27:10 AM



Follow the below steps to create an Image in Circle Shape.You need to follow this article to add images to your project, #### color: rgb(51, 51, 51);]([https://www.fluttercentral.com/Articles/Post/36](How to add an image to the Project?)And then, copy the below code into your main.dart file. Note: Make sure you have updated the image file names as appropriate. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #c586c0;](new color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('Flutter Demo', theme: color: #c586c0;](new color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #c586c0;](new color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Flutter Image Examples'), ); }} color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](final color: #4ec9b0;](String title; color: #569cd6;](@override color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #c586c0;](new color: #4ec9b0;](_MyHomePageState();} color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold( appBar: color: #c586c0;](new color: #4ec9b0;](AppBar( title: color: #c586c0;](new color: #4ec9b0;](Text(widget.title), ), body: color: #c586c0;](new color: #4ec9b0;](Container( child: color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](Stack( alignment: color: #569cd6;](const color: #4ec9b0;](Alignment(color: #b5cea8;](0.8, color: #b5cea8;](0.8), children: [ color: #4ec9b0;](CircleAvatar( backgroundImage: color: #4ec9b0;](AssetImage(color: #ce9178;]('images/carimg.jpeg'), radius: color: #b5cea8;](100.0, ), color: #4ec9b0;](Container( decoration: color: #4ec9b0;](BoxDecoration( color: color: #4ec9b0;](Colors.black45, ), child: color: #4ec9b0;](Text( color: #ce9178;]('Mia B', style: color: #4ec9b0;](TextStyle( fontSize: color: #b5cea8;](20.0, fontWeight: color: #4ec9b0;](FontWeight.bold, color: color: #4ec9b0;](Colors.white, ), ), ), ], ), ), color: color: #569cd6;](const color: #4ec9b0;](Color(color: #b5cea8;](0xff00ffff), ), ); }}

Thanks,Srikanth


Tags: Text on top of an Image in Flutter; Username on top of Image;








0 Comments
Login to comment.
Recent Comments