[英]Flutter overlay image over listtile title
Here is my implementation using 'Stack'.这是我使用“堆栈”的实现。
Because there is a fixed size value, I think whether it is best solution.因为有一个固定的大小值,我认为它是否是最好的解决方案。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _buildBody(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Widget _buildBody() {
return Container(
height: 70,
color: Color(0XFFFFA000),
child: Container(
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical: 5,
horizontal: 30,
),
margin: EdgeInsets.only(left: 30),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5),
),
child: Text(
'El ilustre',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 25,
),
),
),
Icon(Icons.arrow_forward, color: Colors.white),
],
),
Positioned(
left: 0,
child: ClipRRect(
borderRadius: BorderRadius.circular(35.0),
child: Image.network(
'https://i.ibb.co/1vXpqVs/flutter-logo.jpg',
width: 50,
height: 50,
fit: BoxFit.fill,
),
),
)
],
),
));
}
}
Here you go : with using Stack widget, we first added a container
with text
widget and then a CircleAvatar
widget so that CircleAvatar
can lay over the text widget.在这里:使用 Stack 小部件,我们首先添加了一个带有text
小部件的container
,然后添加了一个CircleAvatar
小部件,以便CircleAvatar
可以覆盖文本小部件。
Stack(
alignment: Alignment.centerLeft,
children: [
Container(
width: 300, //define the size of text widget here
margin:
EdgeInsets.only(left: 20, top: 10, bottom: 10, right: 10),
padding:
EdgeInsets.only(left: 50, top: 10, bottom: 10, right: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.black,
),
child: Text(
'Mr. Bun Burgers',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
),
),
CircleAvatar(
radius: 30,
child: Icon(Icons.photo), // Replace this icon widget with your Image asset widget.
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.