Question 74826 in Flutter Question posted in
The official Flutter documentation can be found here.

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?enter image description here

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    if all sizes are fixed.
    I believe the simplest solution is to add svg file by flutter_svg

    enter image description here

    arrow

    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,
    );
  }
}
    Login or Signup to reply.
  3. 0

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search