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

How can i design this UI in flutter

I want to design this section in Flutter:
However, there is a problem that no matter what I do, the different parts keep overlapping and the widget placement is not correct.

enter image description here

The last attempt I made was:

`class TransactionTracker extends StatelessWidget {
  // final Color circleColor;
  // TransactionTracker({required this.circleColor});
  //
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    SizedBox(
                      height: 60,
                      child: CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.white,
                        child: Icon(Icons.download),
                      ),
                    ),
                    Positioned(
                      bottom: -20,
                      child: Text(
                        'Text below CircleAvatar',
                        style: regularTextStyle,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'Awaitingn Deposit',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Awaitingn Confirmation',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Performn Exchange',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Done',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
              ],
            )
          ]),
    );
  }
}`

When I use the code i have provide, the output is not what I expected and the texts are not properly aligned under each circle

Update:

class TransactionTracker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: SizedBox(
                  height: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Text(
                    'Awaitingn Deposit',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Awaitingn Confirmation',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Perform Exchange',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Done',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

but the text doesn’t show completely

Tags:

2

Answers


  1. 0

    Your circular image and below text should be wrap in a single widget, then only you can get proepr alignment

    or

    use Spacer() widget inbetween all the text widgets

    Login or Signup to reply.
  2. 0

    you should use layout related widgets like expanded etc, you can test this code:

    import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TransactionTracker(),
      ),
    );
  }
}

class TransactionTracker extends StatelessWidget {
  // final Color circleColor;
  // TransactionTracker({required this.circleColor});
  //
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 60,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
          ],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              width: 65,
              child: Text(
                'Awaitingn Deposit',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Awaitingn Confirmation',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Performn Exchange',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Done',
                textAlign: TextAlign.center,
              ),
            ),
          ],
        )
      ]),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search