how can I swipe pageview with holding background image in Flutter? - flutter

Question

I want to hold background image and swipe pageview screen.
However, it seems that I can't swipe if I put image file(I can do only when I delete background image) even though you can see the pageindicator.
](https://i.stack.imgur.com/oXYaL.jpg)
please let me know how to do it. Is there any way to solve it? I don't know what I missed here.
import 'package:eseowakorean/page/secondpage/add_image_profile1.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile2.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile3.dart';
import 'package:eseowakorean/page/secondpage/add_image_profile4.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import '../../widgets/text_widgets.dart';
class AddInformationOnBoarding extends StatefulWidget {
const AddInformationOnBoarding({super.key});
#override
State<AddInformationOnBoarding> createState() =>
_AddInformationOnBoardingState();
}
class _AddInformationOnBoardingState extends State<AddInformationOnBoarding> {
PageController _controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Container(
height: double.infinity,
width: double.infinity,
// alignment: Alignment.center,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/home.jpg',
),
fit: BoxFit.cover),
),
child: Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
);
}
}

Answer 1

You are containing everything within the same stack. Add the image itself in another Stack widget.
Try this example:
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
Image.asset(
"assets/home.jpg",
),
Stack(
children: [
PageView(
controller: _controller,
children: [
AddImageProfile1(),
AddImageProfile2(),
AddImageProfile3(),
AddImageProfile4(),
],
),
Column(
children: [
SizedBox(
height: 60,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset('assets/Skip.svg'),
// poppinsTextWidget('hi')
],
),
),
SizedBox(
height: 60,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
poppinsTextWidget('Let' 's Talk About You!', fontSize: 20)
],
),
],
),
Container(
alignment: Alignment(0, 0.75),
child: Row(
children: [
SmoothPageIndicator(controller: _controller, count: 4),
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
],
),
],
),
);