How can i design this UI in flutter

Kighian
May 14, 2023
260 views
1 vote
2 Answers

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.

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: flutter

Answers

- MoonyStary
- May 11, 2023 at 2:32 pm
- 0 votes
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.

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

Please signup or login to give your own answer.

Click here to cancel reply.