英文:
How to add vertical line in the left o two widgets in flutter?
问题
我有一列,在其中显示了两个地址.. 每个地址小部件前面都有一个图标,这个图标包裹在一个行内.. 但我想在这两个图标之间添加一条线..
列--行--图标、地址--行--图标、地址
这是我的代码结构
我已附上了预期的输出图像
如何实现这一点?
英文:
I have a column in which I am showing two address.. Each address widget is preceded by a icon which is wrapped inside a row.. but I want to add a line between the two icons ..
Column--row--icon, address--row--icon, address
This is my structure of code
I have attached the expected output image
How to achieve this?
答案1
得分: 2
I will only provide translations for the code portions as requested:
if all sizes are fixed.
I believe the simplest solution is to add svg file by flutter_svg
[![enter image description here][1]][1]
[arrow][2]
```dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
void main() {
runApp(
const MaterialApp(
home: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
buildFrom(),
buildTo(),
],
),
),
),
);
}
Widget buildFrom() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(left: 50),
child: Text(
'From:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
Row(
children: const [
_Dot(
color: Colors.green,
),
Expanded(
child: Text(
'Apple Headquarters One Apple Park Way Cupertino, CA 95014'),
),
],
),
],
);
}
Widget buildTo() {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 19.5,
bottom: 28,
child: SvgPicture.asset(
'assets/images/arrow.svg',
height: 40,
colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 10),
const Padding(
padding: EdgeInsets.only(left: 50),
child: Text(
'To:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
Row(
children: const [
_Dot(
color: Colors.red,
),
Expanded(
child: Text(
'Google HQ. 1600 Amphitheatre Parkway Mountain View, CA 94043, USA.'),
),
],
)
],
),
],
);
}
}
class _Dot extends StatelessWidget {
const _Dot({
Key? key,
required this.color,
}) : super(key: key);
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: 50,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
),
height: 10,
);
}
}
<details>
<summary>英文:</summary>
if all sizes are fixed.
I believe the simplest solution is to add svg file by flutter_svg
[![enter image description here][1]][1]
[arrow][2]
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
void main() {
runApp(
const MaterialApp(
home: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
buildFrom(),
buildTo(),
],
),
),
),
);
}
Widget buildFrom() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(left: 50),
child: Text(
'From:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
Row(
children: const [
_Dot(
color: Colors.green,
),
Expanded(
child: Text(
'Apple Headquarters One Apple Park Way Cupertino, CA 95014'),
),
],
),
],
);
}
Widget buildTo() {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 19.5,
bottom: 28,
child: SvgPicture.asset(
'assets/images/arrow.svg',
height: 40,
colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 10),
const Padding(
padding: EdgeInsets.only(left: 50),
child: Text(
'To:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
Row(
children: const [
_Dot(
color: Colors.red,
),
Expanded(
child: Text(
'Google HQ. 1600 Amphitheatre Parkway Mountain View, CA 94043, USA.'),
),
],
)
],
),
],
);
}
}
class _Dot extends StatelessWidget {
const _Dot({
Key? key,
required this.color,
}) : super(key: key);
final Color color;
@override
Widget build(BuildContext context) {
return Container(
width: 50,
decoration: BoxDecoration(
color: color,
shape: BoxShape.circle,
),
height: 10,
);
}
}
[1]: https://i.stack.imgur.com/G4fGn.png
[2]: https://www.dropbox.com/s/1nzfo8t69sbx1lt/arrow.svg?dl=0
</details>
# 答案2
**得分**: 0
使用堆栈并在子元素中使用具有期望高度和零宽度的容器,在装饰中添加边框到您的容器,现在您有一条垂直线,如果您想要虚线,可以使用虚线边框包。
<details>
<summary>英文:</summary>
Use stack and use a container in children with expecting height and zero width, in decoration add border to your container, now u have a vertical line, if u want doted line you can use dotted border package.
</details>
# 答案3
**得分**: 0
Use `timeline_tile: ^2.0.0`
```dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'src/showcase_timeline_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TimelineTile Showcase',
theme: ThemeData(
brightness: Brightness.dark,
textTheme: GoogleFonts.nanumPenScriptTextTheme(
Theme.of(context).textTheme,
).apply(bodyColor: Colors.white),
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ShowcaseTimelineTile(),
);
}
}
英文:
Use timeline_tile: ^2.0.0
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'src/showcase_timeline_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TimelineTile Showcase',
theme: ThemeData(
brightness: Brightness.dark,
textTheme: GoogleFonts.nanumPenScriptTextTheme(
Theme.of(context).textTheme,
).apply(bodyColor: Colors.white),
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ShowcaseTimelineTile(),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论