Home > Net >  How to make Flutter Draggable feedback widget look the same like its child widget?
How to make Flutter Draggable feedback widget look the same like its child widget?

Time:01-04

I would like to obtain the effect of having the same Draggable for both child and feedback composed widgets. Look at _getDraggablePaperSheets().

But I get totally different text size for the feedback widget. Why is that?

not the same draggable feedback and child not the same draggable feedback and child

code disclaimer: every PaperSheet has its rotation and color kept inside Controller and is based on questionNumber, so it should look the same.

class Phase3Screen extends StatelessWidget {
  static const ROUTE = '/oneoften/phase3';

  final QuestionsController controller = Get.put(QuestionsController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Stack(
            children: [
              DragTarget<int>(
                builder: (
                  BuildContext context,
                  List<dynamic> accepted,
                  List<dynamic> rejected,
                ) {
                  return Container(
                    height: double.infinity,
                    width: double.infinity,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Obx(() {
                        return Text('Question number: ${controller.getQuestionNumber}');
                      }),
                    ),
                  );
                },
                onAccept: (int draggableData) {
                  debugPrint('draggable onAccept');
                  controller.nextQuestion();
                },
                onWillAccept: (item) {
                  debugPrint('draggable is on the target $item');
                  return true;
                },
                onLeave: (item) {
                  debugPrint('draggable has left the target $item');
                },
              ),
              Center(
                child: Obx(
                  () {
                    return Stack(
                      children: _getDraggablePaperSheets(controller.getQuestionsStackSize),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> _getDraggablePaperSheets(int currentQuestionsStackSize) {
    List<Widget> sheets = [];
    int i = 0;
    logger.d("currentQuestionsStackSize = $currentQuestionsStackSize");
    for (i = 1; i < currentQuestionsStackSize; i  ) {
      sheets.add(
        Draggable(
          maxSimultaneousDrags: 1,
          data: i,
          child: PaperSheet(questionNumber: i),
          feedback: PaperSheet(questionNumber: i)
        ),
      );
    }
    return sheets;
  }
}

class PaperSheet extends GetView<QuestionsController> {
  PaperSheet({
    required this.questionNumber,
    Key? key,
  }) : super(key: key);

  final questionNumber;

  @override
  Widget build(BuildContext context) {
    return Container(
      transform: Matrix4.rotationZ(controller.assignedRotationZ(questionNumber)),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        child: Container(
          width: 250,
          height: 420,
          color: controller.assignedBackgroundColor(questionNumber),
          child: Column(children: [
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(12.0),
                alignment: Alignment.center,
                child: Obx(
                  () {
                    return Text(
                      'Question: ${controller.currentQuestionText}',
                      style: TextStyle(
                        color: controller.assignedTextColor(questionNumber),
                      ),
                    );
                  },
                ),
              ),
            ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(12.0),
                child: Obx(() {
                  return Center(
                    child: Text(
                      'Answer: ${controller.currentQuestionAnswer}',
                      style: TextStyle(
                        color: controller.assignedTextColor(questionNumber),
                      ),
                    ),
                  );
                }),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

CodePudding user response:

Try to wrap with Material widget

  • Related