render method

Implementation

Widget render(BuildContext context, QuizModelEditorState state) {
  var cs = Theme.of(context).colorScheme;
/*     var tt = Theme.of(context).textTheme;
 */
  return Column(
    children: [
      (state.isQuestionKeyListLoading) ?
      const Expanded(
        child: Center(
          child: OwlnextLoading(),
        ),
      )
      :
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: Column(
                children: [

                 if (state.widget.quiz.steps.isEmpty)
                    const Padding(
                      padding: EdgeInsets.all(20),
                      child: Column(
                        children: [
                          Text(
                            'Le questionnaire ne contient aucune étape. \nveuillez en ajouter au moins une',
                            textAlign: TextAlign.center,
                          ),

                        ],
                      ),
                    ),
                  Expanded(
                    child: ReorderableListView(
                      key: state.redrawKey,
                      buildDefaultDragHandles: false,
                      onReorder: state.onReorder,
                       proxyDecorator: (child, index, animation) {
                        return FadeTransition(
                          opacity: animation.drive(Tween(begin: 0.9, end: 1.0)),
                          child: Material(
                            color: Theme.of(context).colorScheme.secondary,
                            elevation: 20,
                            borderRadius: BorderRadius.circular(radius),
                            child: child,
                          ),
                        );
                      },
                      padding: const EdgeInsets.all(16),
                      children: [
                        ...state.widget.quiz.steps.asMap().entries.map((entry) {
                              final index = entry.key;
                              final step = entry.value;
                              return Card(
                                color: Colors.transparent,
                                clipBehavior: Clip.antiAlias,
                                key: ValueKey('stepKeyEditorItem_$index'),
                                child: ClipRRect(
                                  child: QuizStepEditor(
                                    step: step,
                                    onChanged: state.onChangedStep,
                                    stepIndex: index,
                                    onSelectQuestion: state.onSelectQuestion,
                                    onDeleteQuestion:  state.onDeleteQuestion,
                                    selectedQuestion: state.selectedQuestion,
                                    dragHandle: ReorderableDragStartListener(
                                      index: index,
                                      child: Icon(Icons.drag_handle, color: cs.onSurface,),
                                    ),
                                  ),
                                ),
                              );
                            }),
                      ],
                    ),
                  ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: gap * 4, vertical: gap * 2),
                  child: OwlnextButton(
                    //isExpanded: true,
                    minWidth: 300,
                      callback: () {
                        state.addStep();
                      },
                      //isOutlined: true,
                      child: const Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            Icons.add,
                            color: Colors.white,
                          ),
                          SizedBox(width: gap),
                          Flexible(
                            child: Text(
                              'Ajouter une étape',
                            ),
                          ),
                        ],
                      ),
                    ),
                ),
                ],
              ),
            ),
            Expanded(
              child: (state.selectedQuestion != null) ? Container(
                padding: const EdgeInsets.all(gap),
                margin: const EdgeInsets.all(gap).copyWith(left: 0),
                decoration: BoxDecoration(
                  color: cs.surface.withValues(alpha: 0.8),
                  borderRadius: BorderRadius.circular(radius),
                ),
                child: QuizQuestionEditorTabs(
                  key: ValueKey("selected_question_${state.selectedQuestion!.questionKey}"),
                  question: state.selectedQuestion!,
                  onChanged: state.onChangedQuestion,
                )
              ) : const SizedBox(),
            )
          ],
        ),
      ),
    ],
  );
}