Flutter - Create this specific container

Lili
June 5, 2024
67 views
0 votes
2 Answers

Does anyone know how I can create this container in flutter? This is the outcome I want to receive

I tried something like this but I don’t know how to add them to be shown in the specific way

Container(
                        width: MediaQuery.of(context).size.width / 1.5,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(18),
                            color: Colors.black.withOpacity(0.1)),
                        child: Text('Subcribers n 365'),
                      ),

Tags: flutter

Answers

You could do the same behavior using Row, Column and a VerticalDivider like this:


import 'package:flutter/material.dart';

class StatsCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 10,
              spreadRadius: 2,
            ),
          ],
        ),
        child: IntrinsicHeight(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              StatItem(label: 'Subscribers', value: '356'),
              const VerticalDivider(
                width: 20,
                thickness: 2,
                color: Colors.black,
              ),
              StatItem(label: 'Programs', value: '8'),
              const VerticalDivider(
                width: 20,
                thickness: 2,
                color: Colors.black87,
              ),
              StatItem(label: 'Rating', value: '5.0'),
            ],
          ),
        ));
  }
}

class StatItem extends StatelessWidget {
  final String label;
  final String value;

  StatItem({required this.label, required this.value});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          label,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
        SizedBox(height: 5),
        Text(
          value,
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.grey[700],
          ),
        ),
      ],
    );
  }
}

With that you can just use the StatsCard() component.
That shows me this:

try this:

class CustomCard extends StatelessWidget {
  const CustomCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 66,
          width: MediaQuery.of(context).size.width * 0.73,
          padding: const EdgeInsets.only(left: 10),
          decoration: ShapeDecoration(
            shape: const StadiumBorder(),
            color: Colors.grey[200],
            shadows: [
              BoxShadow(
                color: Colors.grey.shade400,
                blurRadius: 10,
                spreadRadius: 2,
              ),
            ],
          ),
          child: const Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Item(
                title: 'Subscriber',
                subtitle: '356',
              ),
              VerticalDivider(
                indent: 8,
                endIndent: 8,
              ),
              Item(
                title: 'Programs',
                subtitle: '8',
              ),
              VerticalDivider(
                indent: 8,
                endIndent: 8,
              ),
              Item(
                title: 'Rating',
                subtitle: '5',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Item extends StatelessWidget {
  final String title;
  final String subtitle;
  const Item({
    super.key,
    required this.title,
    required this.subtitle,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(title),
          Text(subtitle),
        ],
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Create this specific container

Answers