如何在Flutter中的两个小部件的左侧添加垂直线？

huangapple
go评论52阅读模式
英文:

How to add vertical line in the left o two widgets in flutter?

问题

我有一列，在其中显示了两个地址.. 每个地址小部件前面都有一个图标，这个图标包裹在一个行内.. 但我想在这两个图标之间添加一条线..

列--行--图标、地址--行--图标、地址

这是我的代码结构
我已附上了预期的输出图像
如何实现这一点？如何在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?如何在Flutter中的两个小部件的左侧添加垂直线？

答案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(),
);
}
}

如何在Flutter中的两个小部件的左侧添加垂直线？

英文:

Use timeline_tile: ^2.0.0

import &#39;package:flutter/material.dart&#39;;
import &#39;package:flutter/services.dart&#39;;
import &#39;package:google_fonts/google_fonts.dart&#39;;
import &#39;src/showcase_timeline_tile.dart&#39;;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: &#39;TimelineTile Showcase&#39;,
theme: ThemeData(
brightness: Brightness.dark,
textTheme: GoogleFonts.nanumPenScriptTextTheme(
Theme.of(context).textTheme,
).apply(bodyColor: Colors.white),
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ShowcaseTimelineTile(),
);
}
}

如何在Flutter中的两个小部件的左侧添加垂直线？

huangapple
  • 本文由 发表于 2023年4月17日 20:56:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76035406.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定