Created
November 18, 2021 22:33
-
-
Save Devlonoah/f67d35785ad86143bd883e3926ae9971 to your computer and use it in GitHub Desktop.
Using bloc with pageview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:dots_indicator/dots_indicator.dart'; | |
import 'package:flutter/material.dart'; | |
import 'package:flutter_bloc/flutter_bloc.dart'; | |
import 'bloc/intro_bloc.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Intro', | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: BlocProvider( | |
create: (context) => IntroBloc(), | |
child: IntroWidget(), | |
), | |
); | |
} | |
} | |
class IntroWidget extends StatelessWidget { | |
const IntroWidget({ | |
Key? key, | |
}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: SafeArea( | |
child: Stack( | |
children: [ | |
PageView( | |
onPageChanged: (index) { | |
context.read<IntroBloc>().add(IntroPageChanged(index)); | |
}, | |
children: listPages, | |
), | |
BlocBuilder<IntroBloc, IntroState>( | |
builder: (context, state) { | |
print(state.showSkip); | |
return Positioned( | |
top: 10, | |
right: 20, | |
child: Visibility( | |
visible: state.showSkip!, | |
child: OutlinedButton( | |
onPressed: () {}, | |
child: const Text( | |
'Skip', | |
style: TextStyle(fontSize: 20), | |
), | |
), | |
)); | |
}, | |
), | |
Positioned( | |
bottom: 80, | |
right: 40, | |
left: 40, | |
child: BlocBuilder<IntroBloc, IntroState>( | |
builder: (context, state) { | |
print(state.pageIndex); | |
return DotsIndicator( | |
dotsCount: listPages.length, | |
position: state.pageIndex!, | |
); | |
}, | |
), | |
) | |
], | |
), | |
), | |
); | |
} | |
} | |
//List of pages | |
final listPages = [ | |
const PageOne(), | |
const PageTwo(), | |
const PageThree(), | |
]; | |
class PageOne extends StatelessWidget { | |
const PageOne({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Center( | |
child: Text('Page one'), | |
); | |
} | |
} | |
class PageTwo extends StatelessWidget { | |
const PageTwo({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Center( | |
child: Text('Page one'), | |
); | |
} | |
} | |
class PageThree extends StatelessWidget { | |
const PageThree({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Center( | |
child: Text('Page one'), | |
); | |
} | |
} | |
//Intro Bloc | |
import 'package:bloc/bloc.dart'; | |
import 'package:meta/meta.dart'; | |
part 'intro_event.dart'; | |
part 'intro_state.dart'; | |
class IntroBloc extends Bloc<IntroEvent, IntroState> { | |
IntroBloc() : super(IntroState.initial()); | |
@override | |
Stream<IntroState> mapEventToState( | |
IntroEvent event, | |
) async* { | |
if (event is IntroPageChanged) { | |
yield state.copyWith( | |
pageIndex: event.pageIndex.toDouble(), | |
//2 represent total no of pages -1 | |
//Since index of List starts from 0 | |
showSkip: event.pageIndex == 2, | |
); | |
} | |
} | |
} | |
// IntroBloc state | |
part of 'intro_bloc.dart'; | |
class IntroState { | |
final double? pageIndex; | |
final bool? showSkip; | |
const IntroState({this.pageIndex, this.showSkip}); | |
static IntroState initial() { | |
return const IntroState( | |
pageIndex: 0, | |
showSkip: false, | |
); | |
} | |
IntroState copyWith({double? pageIndex, bool? showSkip}) { | |
return IntroState( | |
pageIndex: pageIndex, | |
showSkip: showSkip, | |
); | |
} | |
} | |
//IntroBloc event | |
part of 'intro_bloc.dart'; | |
@immutable | |
abstract class IntroEvent {} | |
class IntroPageChanged extends IntroEvent { | |
final int pageIndex; | |
IntroPageChanged(this.pageIndex); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment