Чтобы создать экран адаптации во 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. Подробности о пакете и примеры его использования можно найти на официальной странице документации пакета.