How to make this design in flutter

Question

I have to make it carousel slider and the data will be come from API's. So, how we can show API's data in vertical format like one by one. So you can help me in these.

So, this the image like how I have to make from taking data through API's.

Answer 1

Without more info from your side it's hard to provide you with an accurate implementation but here's what I've been able to reproduce:

I've been using the package polygon to draw the star-like shapes (note that you might not be needing this package in a future Flutter version) and here's the full code:

import 'package:flutter/material.dart';
import 'package:polygon/polygon.dart';

class CryptoCard extends StatelessWidget {
  final int id;
  final String title;
  final double bid;
  final String creatorName;
  final String creatorPictureUrl;
  final double height;
  final double width;

  const CryptoCard({
    super.key,
    required this.id,
    required this.title,
    required this.bid,
    required this.creatorName,
    required this.creatorPictureUrl,
    this.height = 500.0,
    this.width = 400.0,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
          height: height,
          width: width,
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Color(0xFFc4c4c4),
            borderRadius: BorderRadius.circular(48),
          ),
          child: _InfoContainer(
            title: title,
            imageUrl: creatorPictureUrl,
            name: creatorName,
            bid: bid,
          ),
        ),
        Positioned(
          left: 0,
          top: 0,
          child: _IdHandler(id),
        ),
      ],
    );
  }
}

class _IdHandler extends StatelessWidget {
  final int id;

  const _IdHandler(this.id);

  @override
  Widget build(BuildContext context) {
    const size = 120.0;
    return Container(
      height: size,
      width: size,
      alignment: Alignment.center,
      decoration: ShapeDecoration(
        shape: PolygonBorder(
          polygon: RegularStarPolygon(
            vertexCount: 15,
            ratio: 0.84,
          ),
          radius: 20,
        ),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xFF40c75c), Color(0xFF70fbb0)],
        ),
      ),
      child: Text(
        '$id',
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 48,
        ),
      ),
    );
  }
}

class _InfoContainer extends StatelessWidget {
  final String title;
  final String imageUrl;
  final String name;
  final double bid;

  const _InfoContainer({
    required this.title,
    required this.imageUrl,
    required this.name,
    required this.bid,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.maxFinite,
      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
      color: Color(0xFF9c9c9c),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(title, style: TextStyle(color: Colors.white, fontSize: 20)),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              _Creator(name: name, imageUrl: imageUrl),
              const SizedBox(width: 12),
              _Bid(bid),
            ],
          ),
          const SizedBox(height: 12),
          const _Bottom(),
        ],
      ),
    );
  }
}

class _Creator extends StatelessWidget {
  final String name;
  final String imageUrl;

  const _Creator({required this.name, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        _CreatorAvatar(imageUrl),
        const SizedBox(width: 12),
        Flexible(
          child: _Section(
            title: 'Creator',
            content: name,
          ),
        ),
      ],
    );
  }
}

class _CreatorAvatar extends StatelessWidget {
  final String imageUrl;

  const _CreatorAvatar(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    const size = 48.0;
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(
          clipBehavior: Clip.antiAlias,
          width: size,
          height: size,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(image: NetworkImage(imageUrl), fit: BoxFit.cover),
            border: Border.all(color: Colors.white, width: 2),
          ),
        ),
       Positioned(
        bottom: 0,
        right: -8,
        child: Container(
          padding: const EdgeInsets.all(4),
          decoration: ShapeDecoration(
            shape: PolygonBorder(
              polygon: RegularStarPolygon(
                vertexCount: 10,
                ratio: 0.8,
              ),
            ),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xFF40c75c), Color(0xFF70fbb0)],
            ),
            ),
            child: Icon(Icons.check, color: Colors.white, size: 16),
          ),
        ),
      ],
    );
  }
}

class _Bid extends StatelessWidget {
  final double bid;

  const _Bid(this.bid);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 48,
          width: 48,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Color(0xFFb9b9b9),
          ),
        ),
        const SizedBox(width: 12),
        Flexible(
          child: _Section(
            title: 'Current bid',
            content: '$bid ETH',
          ),
        ),
      ],
    );
  }
}

class _Section extends StatelessWidget {
  final String title;
  final String content;

  const _Section({required this.title, required this.content});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title, style: TextStyle(color: Colors.white, fontSize: 10)),
        Text(content, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
      ],
    );
  }
}

class _Bottom extends StatelessWidget {
  const _Bottom();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 168.0,
      height: 48.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24),
        color: Colors.white,
      ),
    );
  }
}

You can also check the live example on zapp.run.