Как настроить Stepper в Flutter так, чтобы на каждой странице был один шаг.

Вопрос или проблема

Ответ или решение

Чтобы настроить Stepper в Flutter таким образом, чтобы каждый шаг отображался на отдельной странице, можно использовать комбинацию PageView и Stepper. В этом ответе я продемонстрирую, как это реализовать, чтобы у вас был один шаг на странице, и пользователь мог возвращаться к предыдущим шагам для изменения введенных данных.

Вот пример кода, который поможет вам создать такое приложение:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stepper Example',
      home: StepperPage(),
    );
  }
}

class StepperPage extends StatefulWidget {
  @override
  _StepperPageState createState() => _StepperPageState();
}

class _StepperPageState extends State<StepperPage> {
  final int _totalSteps = 5;
  int _currentStep = 0;
  final PageController _pageController = PageController();
  final List<TextEditingController> _controllers = List.generate(5, (_) => TextEditingController());

  void _nextStep() {
    if (_currentStep < _totalSteps - 1) {
      setState(() {
        _currentStep++;
        _pageController.jumpToPage(_currentStep);
      });
    }
  }

  void _prevStep() {
    if (_currentStep > 0) {
      setState(() {
        _currentStep--;
        _pageController.jumpToPage(_currentStep);
      });
    }
  }

  void _submit() {
    // Здесь вы можете обработать отправку данных
    for (var controller in _controllers) {
      print(controller.text);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stepper with Pages'),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _currentStep = index;
                });
              },
              itemCount: _totalSteps,
              itemBuilder: (context, index) {
                return _buildStepContent(index);
              },
            ),
          ),
          _buildNavigationBar(),
        ],
      ),
    );
  }

  Widget _buildStepContent(int stepIndex) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Шаг ${stepIndex + 1}',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 20),
          TextField(
            controller: _controllers[stepIndex],
            decoration: InputDecoration(labelText: 'Введите данные для шага ${stepIndex + 1}'),
          ),
        ],
      ),
    );
  }

  Widget _buildNavigationBar() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ElevatedButton(
          onPressed: _currentStep == 0 ? null : _prevStep,
          child: Text('Назад'),
        ),
        ElevatedButton(
          onPressed: _currentStep == _totalSteps - 1 ? _submit : _nextStep,
          child: Text(_currentStep == _totalSteps - 1 ? 'Отправить' : 'Вперед'),
        ),
      ],
    );
  }
}

Объяснение кода

1. Создание приложения: В main() запускается приложение, которое показывает StepperPage.

2. Стейт и контроллеры: Внутри _StepperPageState хранится индекс текущего шага и контроллер для PageView, а также массив контроллеров для текстовых полей на каждом шаге.

3. Навигация: Методы _nextStep, _prevStep и _submit управляют переходами между шагами и обработкой данных.

4. Строение контента: В методе _buildStepContent создается текстовое поле для ввода данных на каждом шаге, где индекс шага передается в качестве параметра.

5. Навигационная панель: В _buildNavigationBar создаются кнопки "Назад" и "Вперед". Кнопка "Вперед" меняет текст на "Отправить", если пользователь находится на последнем шаге.

Заключение

Этот код предоставляет полный функционал, который вы ищете. Пользователи могут перемещаться между шагами, изменять значения и в конечном итоге отправить все данные. Вы можете расширить этот код, добавляя валидацию и стилизацию в зависимости от ваших требований.