Skip to content

Instantly share code, notes, and snippets.

@CoderNamedHendrick
Last active January 22, 2022 09:17
Show Gist options
  • Save CoderNamedHendrick/32dbe2495bcc2d552257b78d84677324 to your computer and use it in GitHub Desktop.
Save CoderNamedHendrick/32dbe2495bcc2d552257b78d84677324 to your computer and use it in GitHub Desktop.
Basic onboard cards
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: OnboardView(),
);
}
}
class OnboardView extends StatefulWidget {
const OnboardView({Key? key}) : super(key: key);
@override
_OnboardViewState createState() => _OnboardViewState();
}
class _OnboardViewState extends State<OnboardView> {
Position? currentPosition;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigoAccent,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SelectViews(
onChanged: (value) {
setState(() {
currentPosition = value;
});
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
selectedChangeContainer(
isSelected: currentPosition == Position.first ? true : false,
),
SizedBox(
width: 10,
),
selectedChangeContainer(
isSelected: currentPosition == Position.second ? true : false,
),
SizedBox(
width: 10,
),
selectedChangeContainer(
isSelected: currentPosition == Position.third ? true : false,
),
],
),
],
),
),
);
}
Widget selectedChangeContainer({isSelected = false}) {
return AnimatedContainer(
duration: Duration(milliseconds: 500),
height: 15,
width: 30,
decoration: BoxDecoration(
color: isSelected ? Colors.white : Colors.black26,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
}
Widget showContainer({bool isSelected = false}) {
return AnimatedContainer(
duration: Duration(milliseconds: 500),
height: isSelected ? 400 : 300,
width: isSelected ? 250 : 150,
color: Colors.red,
);
}
enum Position { first, second, third }
class SelectViews extends StatefulWidget {
const SelectViews({Key? key, required this.onChanged}) : super(key: key);
final ValueChanged<Position> onChanged;
@override
_SelectViewsState createState() => _SelectViewsState();
}
class _SelectViewsState extends State<SelectViews> {
late ScrollController _scrollController;
bool first = false;
bool second = false;
bool third = false;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(() {
if (_scrollController.offset ==
_scrollController.position.maxScrollExtent) {
setState(() {
first = false;
second = false;
third = true;
});
widget.onChanged(Position.third);
} else if (_scrollController.offset ==
_scrollController.position.minScrollExtent) {
setState(() {
first = true;
second = false;
third = false;
});
widget.onChanged(Position.first);
} else {
setState(() {
first = false;
second = true;
third = false;
});
widget.onChanged(Position.second);
}
print(_scrollController.offset);
});
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
_scrollController.animateTo(
(_scrollController.position.maxScrollExtent / 2) + 50.0,
duration: Duration(microseconds: 100),
curve: Curves.easeIn,
);
});
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 420,
width: double.infinity,
child: SingleChildScrollView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: 30,
),
showContainer(isSelected: first),
SizedBox(
width: 50,
),
showContainer(isSelected: second),
SizedBox(
width: 50,
),
showContainer(isSelected: third),
SizedBox(
width: 30,
),
],
),
),
);
}
}
@XeBastian
Copy link

Nice one.

@omotoSure
Copy link

Thank you for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment