I have an app that has a splash screen and an onboarding screen. There are no errors or warnings anywhere; the app runs to show the splash screen but then crashes instead of displaying the onboarding screen.
======== Exception caught by widgets library =======================================================
The following UnsupportedError was thrown building BoardingPage(dirty, state: _BoardingScreenState#e3368):
Unsupported operation: Cannot add to an unmodifiable list
The relevant error-causing widget was:
BoardingPage BoardingPage:file:///C:/Users/Srishti/AndroidStudioProjects/App-mini-project-1/lib/splash.dart:22:78
Here’s my code :
splash.dart
import 'package:flutter/material.dart';
import 'boarding_screen.dart';
class Splash extends StatefulWidget {
const Splash({Key? key}) : super(key: key);
@override
State<Splash> createState() => _SplashState();
}
class _SplashState extends State<Splash> {
@override
void initState(){
super.initState();
_navigatetohome();
}
_navigatetohome() async {
await Future.delayed(Duration(milliseconds: 2500), (){});
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => BoardingPage()));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Text('Your Scheduler',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.normal,
),
),
),
),
);
}
}
slide.dart
class Slide {
String image;
String heading;
Slide(this.image, this.heading);
}
boarding_screen.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gradient_widgets/gradient_widgets.dart';
import 'package:schedule_management/slide.dart';
import 'login_screen.dart';
class BoardingPage extends StatefulWidget {
const BoardingPage({Key? key}) : super(key: key);
@override
_BoardingScreenState createState() => _BoardingScreenState();
}
class _BoardingScreenState extends State<BoardingPage> {
int _currentPage = 0;
List<Slide> _slides = [];
PageController _pageController = PageController();
@override
void initState() {
_currentPage = 0;
_slides = [
Slide("images/slide-1.png", "Manage your time"),
Slide("images/slide-2.png", "Schedule your tasks"),
Slide("images/slide-3.png", "Never miss out on any task"),
];
_pageController = PageController(initialPage: _currentPage);
super.initState();
}
// the list which contain the build slides
List<Widget> _buildSlides() {
return _slides.map(_buildSlide).toList();
}
// building single slide
Widget _buildSlide(Slide slide) {
return Column(
children: <Widget>[
Expanded(
child: Container(
margin: const EdgeInsets.all(1),
child: Image.asset(slide.image, fit: BoxFit.contain),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 70),
child: Text(
slide.heading,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.w900,
),
),
),
const SizedBox(
height: 230,
)
],
);
}
// handling the on page changed
void _handlingOnPageChanged(int page) {
setState(() => _currentPage = page);
}
// building page indicator
Widget _buildPageIndicator() {
Row row = Row(mainAxisAlignment: MainAxisAlignment.center, children: const []);
for (int i = 0; i < _slides.length; i++) {
row.children.add(_buildPageIndicatorItem(i));
if (i != _slides.length - 1) {
row.children.add(const SizedBox(
width: 12,
));
}
}
return row;
}
Widget _buildPageIndicatorItem(int index) {
return Container(
width: index == _currentPage ? 8 : 5,
height: index == _currentPage ? 8 : 5,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: index == _currentPage
? const Color.fromRGBO(136, 144, 178, 1)
: const Color.fromRGBO(206, 209, 223, 1)),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: <Widget>[
PageView(
controller: _pageController,
onPageChanged: _handlingOnPageChanged,
physics: BouncingScrollPhysics(),
children: _buildSlides(),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Column(
children: <Widget>[
_buildPageIndicator(),
SizedBox(height: 32,),
Container(
// see the page indicators
margin: EdgeInsets.symmetric(horizontal: 10000000),
child: SizedBox(
width: double.infinity,
child: GradientButton(
callback: () => {},
gradient: LinearGradient(colors: const [
Color.fromRGBO(11, 198, 200, 1),
Color.fromRGBO(68, 183, 183, 1)
]),
elevation: 0,
increaseHeightBy: 28,
increaseWidthBy: double.infinity,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100),
),
child: Text(
"",
style: TextStyle(
letterSpacing: 4,
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)),
),
SizedBox(height: 10,),
CupertinoButton(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.grey,
),
),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => LoginScreen()));
}),
SizedBox(height: 30,),
],
),
)
],
),
);
}
}
I have tried restarting Android Studio and running flutter clean but the app still crashes.
>Solution :
The problem probably because of the following code:
Widget _buildPageIndicator() {
Row row = Row(mainAxisAlignment: MainAxisAlignment.center, children: const []);
for (int i = 0; i < _slides.length; i++) {
row.children.add(_buildPageIndicatorItem(i));
if (i != _slides.length - 1) {
row.children.add(const SizedBox(
width: 12,
));
}
}
return row;
}
where you’re trying to change the const row children. So, change it like the following code:
Widget _buildPageIndicator() {
List<Widget> children = [];
for (int i = 0; i < _slides.length; i++) {
children.add(_buildPageIndicatorItem(i));
if (i != _slides.length - 1) {
children.add(const SizedBox(
width: 12,
));
}
}
return Row(mainAxisAlignment: MainAxisAlignment.center,
children: children,
);
}