Методы создания экрана адаптации во Flutter: пакет PageView, Stepper и IntroViews

Чтобы создать экран адаптации во Flutter, вы можете использовать несколько методов. Вот несколько примеров с фрагментами кода:

Метод 1: использование PageView

import 'package:flutter/material.dart';
class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends State<OnboardingScreen> {
  PageController _pageController;
  int _currentPage = 0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) {
          setState(() {
            _currentPage = index;
          });
        },
        children: [
          // Page 1
          Container(
            color: Colors.blue,
            child: Center(
              child: Text('Page 1'),
            ),
          ),
          // Page 2
          Container(
            color: Colors.green,
            child: Center(
              child: Text('Page 2'),
            ),
          ),
          // Page 3
          Container(
            color: Colors.red,
            child: Center(
              child: Text('Page 3'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              FlatButton(
                onPressed: () {
                  _pageController.previousPage(
                    duration: Duration(milliseconds: 300),
                    curve: Curves.easeInOut,
                  );
                },
                child: Text('Previous'),
              ),
              FlatButton(
                onPressed: () {
                  if (_currentPage == 2) {
                    // Handle last page action
                  } else {
                    _pageController.nextPage(
                      duration: Duration(milliseconds: 300),
                      curve: Curves.easeInOut,
                    );
                  }
                },
                child: Text(_currentPage == 2 ? 'Finish' : 'Next'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Метод 2: использование виджета Stepper

Container(
color: Colors.red,
дочерний элемент: Center(
дочерний элемент: Text(‘Step 3’),
),
),
),
];

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stepper(
currentStep: _currentStep,
onStepContinue: () {
setState(() {
if (_currentStep <_steps.length – 1) {
_currentStep++;
} else {
// Обработка действия последнего шага

});
},
onStepCancel: () {
setState(() {
if (_currentStep >0) {
_currentStep–;

});
},
шаги: _steps,
),
);

Метод 3: использование пакета IntroViews Flutter
Вы также можете использовать пакет intro_views_flutterдля создания экрана адаптации во Flutter. Подробности о пакете и примеры его использования можно найти на официальной странице документации пакета.