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?
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