how can I make items that match the height of the container and card that I have

Question

how can i make like this?

I use Expansion Tiles My Code:

Container(
  child: Stack(
    children: [
      Padding(
        padding: const EdgeInsets.only(right: 20, left: 30),
        child: Column(
          children: [
            Row(
              children: [
                Flexible(
                  child: Text(
                    'Jhon Doe',
                  ),
                ),
                Flexible(
                  child: Container(
                    height: 22,
                    width: 70,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: const Color(0XFF00B383),
                    ),
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 1),
                        child: Flexible(
                          child: Text(
                            'User',
                          ),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
            Text(
              'Level',
            ),
            Row(
              children: [
                const Icon(
                  Icons.level,
                  size: 18,
                  color: Color(0XFF3F414E),
                ),
                const SizedBox(
                  width: 5,
                ),
                Text(
                  'Boss',
                ),
              ],
            ),
            InkWell(
              onTap: () {
              },
              child: const Text(
                'Detailed',
              ),
            ),
            const SizedBox(
              height: 15,
            ),
     ExpansionTile(
     title: const Text('Phone'),
     children: List.generate(state.user.boss.length, (index) {      
     return Card(
      child: Text('+91 84785783458')
     );
     }
     )

          ],
        ),
      ),
      Container(
        color: Colors.red,
        width: 20,
        height: ,
        child: const Text('data'),
      )
    ],
  ),
);

I am using ExpansionTile, how can I create it? , I am using ExpansionTile, how can I create it? I am using ExpansionTile, how can I create it? I am using ExpansionTile, how can I create it? I am using ExpansionTile, how can I create it? I am using ExpansionTile, how can I create it?

Answer 1

I hope this is the code you want. As a child of Container , use Container to create a frame. Add your design code in it!

 Container(
              width: 200,
              height: 100,
              alignment: Alignment.centerRight,
              decoration: BoxDecoration(
                color: Color(0xFFD50000),
              borderRadius: BorderRadius.circular(8),
              ),
              child: Container(
                width: 190,
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(topRight: Radius.circular(8), bottomRight: Radius.circular(8)),
                  color: Colors.redAccent,
                ),
                child: Column(
                  children: <Widget>[
                    ///Implements your Designed
                  ],
                ),
              ),
            ),

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 100,
      color: Colors.red,
      alignment: Alignment.centerRight,
      child: Container(
        width: 260,
        height: 100,
        color: Colors.red.shade200,
        child: ExpansionTile(
          leading: Icon(Icons.people, color: Colors.white, size: 30),
          iconColor: Colors.white,
          title: Text('Jhon Dee', style: TextStyle(color: Colors.white),),
          children: <Widget>[
            ListTile(title: Text('+91 999 000 1111', style: TextStyle(color: Colors.white),)),
          ],
        ),
      ),
    );
  }
}