build method

  1. @override
Widget build(
  1. BuildContext context,
  2. AutonomyModel model
)
override

Builds the UI according to the state in model.

Implementation

@override
Widget build(BuildContext context, AutonomyModel model) => LayoutBuilder(
  builder: (context, constraints) => Column(
    children: [
      MapPageHeader(model: model, index: index),
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            if (constraints.maxWidth > 700) ...[
              const SizedBox(width: 16),
              const MapLegend(),
            ],
            const SizedBox(width: 16),
            Flexible(
              flex: 10,
              child: AspectRatio(
                aspectRatio: 1,
                child: (!model.isPlayingBadApple)
                    ? createMapGrid(model)
                    : CustomPaint(
                        willChange: true,
                        painter: BadApplePainter(
                          frameNumber: model.badAppleFrame,
                          obstacles: model.data.obstacles,
                        ),
                      ),
              ),
            ),
            const SizedBox(width: 16),
            const Spacer(),
            ConstrainedBox(
              constraints: const BoxConstraints(
                maxWidth: 250,
              ),
              child: AbsorbPointer(
                absorbing: model.isPlayingBadApple,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    markerControls(context, model),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "View Options:",
                          style: context.textTheme.titleLarge,
                        ),
                        Row(
                          children: [
                            const Text("Snap to Grid:"),
                            const SizedBox(width: 5),
                            Switch(
                              value: model.snapToGrid,
                              onChanged: (value) => model.snapToGrid = value,
                            ),
                          ],
                        ),
                        const Text("Scale:"),
                        Slider(
                          value: model.gridSize.clamp(1, 41).toDouble(),
                          min: 1,
                          max: 41,
                          divisions: 20,
                          label: "${model.gridSize}x${model.gridSize}",
                          onChanged: (value) => model.zoom(value.toInt()),
                        ),
                      ],
                    ),
                    AutonomyCommandEditor(model.commandBuilder, model),
                  ],
                ),
              ),
            ),
            const SizedBox(width: 16),
          ],
        ),
      ),
    ],
  ),
);