How to make a normal container a ExpansionPanelList in flutter

mishalhaneef 0
Viewed 31

here I've a container class with decoration.

Container(
    height: 90,
    width: 150,
    decoration: const BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.all(Radius.circular(30)),
      boxShadow: [
        BoxShadow(
          color: Colors.black,
          offset: Offset(0.0, 0.0),
          blurRadius: 14.0,
          spreadRadius: -15,
        ), //BoxShadow
      ],
    ),
  );

I need to perform ExpansionPanelList with the container decoration here is an example

enter image description here

but when I'm doing this, then this happening enter image description here

how do I make this inside of the container?

here is my expansion list code

ExpansionPanelList.radio(
        children: taskList
            .map((task) => ExpansionPanelRadio(
                  value: task,
                  headerBuilder: (context, isOpen) =>
                      TaskTile(task: task, taskList: taskList),
                  body: const Text('ss'),
                ))
            .toList());

the TaskTile is the code of the task tile.

here is tasktile code


class TaskTile extends StatelessWidget {
  const TaskTile(
      {Key? key, required this.task, this.isChecked, required this.taskList})
      : super(key: key);
  final Task task;
  final isChecked;
  final List<Task> taskList;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
      child: GestureDetector(
        onLongPress: () => _removeOrDeleteTask(context, task),
        child: BlocBuilder<SwitchBloc, SwitchState>(
          builder: (context, state) {
            return Container(
                decoration: const BoxDecoration(
                  // borderRadius: const BorderRadius.all(Radius.circular(15)),
                  // border: Border.all(width: 1),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      offset: Offset(0.0, 0.0),
                      blurRadius: 14.0,
                      spreadRadius: -15,
                    ), //BoxShadow
                  ],
                ),
                height: 90,
                width: 150,
                child: Card(
                  shape: RoundedRectangleBorder(
                    side: const BorderSide(width: 0.2),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Row(
                    children: [
                      BlocBuilder<SwitchBloc, SwitchState>(
                        builder: (context, state) {
                          return Checkbox(
                            shape: const RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5.0))),
                            splashRadius: 10,
                            checkColor:
                                state.switchValue ? Colors.black : Colors.white,
                            fillColor: MaterialStateProperty.all<Color>(
                              state.switchValue
                                  ? Colors.white
                                  : Constants.appThemeColor,
                            ),
                            value: isChecked,
                            onChanged: task.isDeleted == false
                                ? (bool? value) {
                                    context
                                        .read<TaskBloc>()
                                        .add(UpdateTask(task: task));
                                  }
                                : null,
                          );
                        },
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SizedBox(
                              width: 230,
                              child: Text.rich(
                                TextSpan(text: task.title),
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontFamily: 'Helvatica_lite',
                                  decoration: task.isDone == true
                                      ? TextDecoration.lineThrough
                                      : TextDecoration.none,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15,
                                  color: task.isDone == true
                                      ? state.switchValue
                                          ? const Color(0xFF575862)
                                          : Colors.grey
                                      : state.switchValue
                                          ? const Color(0xFFDDDDDD)
                                          : Colors.black,
                                ),
                              )),
                          const SizedBox(height: 4),
                          // TODO implemenet time here
                          Text('Monday | 10:17 pm',
                              // '${todo.day} | ${todo.time}',
                              style: TextStyle(
                                fontSize: 13,
                                fontFamily: 'Helvatica_lite',
                                color: task.isDone == true
                                    ? state.switchValue
                                        ? const Color(0xFF474853)
                                        : Colors.grey
                                    : state.switchValue
                                        ? const Color(0xFF656A85)
                                        : const Color.fromARGB(255, 92, 92, 92),
                              ))
                        ],
                      ),
                      const Spacer(),
                      const Icon(Icons.keyboard_arrow_down),
                      const SizedBox(width: 15)
                    ],
                  ),
                ));
          },
        ),
      ),
    );
  }
}

how do I implement this?

flutter-layout dart flutter
2 Answers

i've a simmilar issue before when i was creating a Flutter app, then i realized that is more efficient, using MediaQuery instead giving numbers, i.e.

height:  MediaQuery.of(context).size.height*10,
width:  MediaQuery.of(context).size.width*80,

this is a example, i hope that you can solve this problem.

Alx Ram0

Here it is this looks like you want the expanded list:

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Expansion Panel List';

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

// stores ExpansionPanel state information
class Item {
  Item({
    required this.id,
    required this.expandedValue,
    required this.headerValue,
    this.checkValue = false,
    this.isExpanded = false,
  });
  int id;
  String expandedValue;
  String headerValue;
  bool isExpanded;
  bool checkValue;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      id: index,
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(30)),
          boxShadow: [
            BoxShadow(
              color: Colors.black,
              offset: Offset(0.0, 0.0),
              blurRadius: 14.0,
              spreadRadius: -15,
            ), //BoxShadow
          ],
        ),
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 1,
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanelRadio(
          value: item.id,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Row(
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        // Toggle check value when tapped.
                        item.checkValue = !item.checkValue;
                      });
                    },
                    child: Icon(
                        item.checkValue ? Icons.check_box : Icons.check_box_outline_blank_rounded,
                        color: Colors.lightBlue,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Text(item.headerValue,
                  style: TextStyle(decoration: item.checkValue ? TextDecoration.lineThrough : null),
                  )
                ],
              ),
            );
          },
          body: ListTile(
              title: Text(item.expandedValue),
              subtitle:
              const Text('To delete this panel, tap the trash can icon'),
              trailing: const Icon(Icons.delete),
              onTap: () {
                setState(() {
                  _data.removeWhere((Item currentItem) => item == currentItem);
                });
              }),
          // isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

enter image description here

If you want to add more items i.e date you can do that by adding it in TaskFile class and for style you can also do that in that class, If you want padding in the Expanded List, then, give the form of the list as you want.

Alx Ram0
Related