Skip to content

A
amse
Commit 888706d5 authored by Timothé KOBAK's avatar Timothé KOBAK
Browse files
Options

UI + Favorite

parent f97716bd
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 26 deletions
tp1/assets/images/1.jpg
View replaced file @ f97716bd View file @ 888706d5
tp1/assets/images/1.jpg

1.34 MB | W: | H:

tp1/assets/images/1.jpg

72.1 KB | W: | H:

tp1/assets/images/1.jpg
tp1/assets/images/1.jpg
tp1/assets/images/1.jpg
tp1/assets/images/1.jpg
  • 2-up
  • Swipe
  • Onion skin
tp1/assets/images/2.jpg
View replaced file @ f97716bd View file @ 888706d5
tp1/assets/images/2.jpg

937 KB | W: | H:

tp1/assets/images/2.jpg

45.1 KB | W: | H:

tp1/assets/images/2.jpg
tp1/assets/images/2.jpg
tp1/assets/images/2.jpg
tp1/assets/images/2.jpg
  • 2-up
  • Swipe
  • Onion skin
tp1/lib/main.dart
View file @ 888706d5
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
......@@ -13,11 +14,11 @@ class TindBook extends StatelessWidget {
child: MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
primaryColor: Color.fromRGBO(204, 213, 174, 1),
primaryColor: Color.fromRGBO(212, 163, 115, 1),
backgroundColor: Color.fromRGBO(233, 237, 201, 1),
scaffoldBackgroundColor: Color.fromRGBO(254, 250, 224, 1),
appBarTheme: AppBarTheme(
backgroundColor: Color.fromRGBO(204, 213, 174, 1), // Set app bar color
backgroundColor: Color.fromRGBO(212, 163, 115, 1), // Set app bar color
),
navigationRailTheme: NavigationRailThemeData(
backgroundColor: Color.fromRGBO(212, 163, 115, 1), // Set navigation rail color
......@@ -25,7 +26,16 @@ class TindBook extends StatelessWidget {
),
title: 'Tind Book',
home: Scaffold(
appBar: AppBar(title: const Text('Draggable Sample')),
appBar: AppBar(
title: Text(
'Tind Book',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
),
),
),
body: const MyHomePage(),
),
),
......@@ -34,27 +44,26 @@ class TindBook extends StatelessWidget {
}
class TindBookState extends ChangeNotifier {
// List of image paths
List<String> imagePaths = [
'assets/images/passeur.png',
'assets/images/1.jpg',
'assets/images/2.jpg',
'assets/images/3.jpg',
'assets/images/4.jpg',
// Add more image paths as needed
];
// Index of the currently displayed image
int currentImageIndex = 0;
List<String> swipedRightBooks = [];
// Function to handle swiping in any direction
void handleSwipe(int direction) {
if (direction == 1) {
// Swipe right
if (currentImageIndex < imagePaths.length - 1) {
currentImageIndex++;
swipedRightBooks.add(imagePaths[currentImageIndex]);
notifyListeners();
}
} else {
// Swipe left
if (currentImageIndex > 0) {
currentImageIndex--;
notifyListeners();
......@@ -101,15 +110,33 @@ class _MyHomePageState extends State<MyHomePage> {
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
label: Text(
'Home',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
NavigationRailDestination(
icon: Icon(Icons.swipe),
label: Text('Swipe'),
label: Text(
'Swipe',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
NavigationRailDestination(
icon: Icon(Icons.info),
label: Text('About'),
label: Text(
'About',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
],
selectedIndex: selectedIndex,
......@@ -182,11 +209,17 @@ class _TindBookContentState extends State<TindBookContent> {
if (_isSwiping) {
_isSwiping = false;
if (_deltaX > 50) {
// Swipe right
state.handleSwipe(1);
showDialog(
context: context,
builder: (_) => SwipeFeedback(isSwipeRight: true),
);
} else if (_deltaX < -50) {
// Swipe left
state.handleSwipe(-1);
showDialog(
context: context,
builder: (_) => SwipeFeedback(isSwipeRight: false),
);
}
}
_startX = 0.0;
......@@ -203,16 +236,16 @@ class _TindBookContentState extends State<TindBookContent> {
),
),
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
top: 20,
left: 20,
right: 20,
bottom: 20,
child: Transform.translate(
offset: Offset(_deltaX, 0.0),
child: Transform.rotate(
angle: _deltaX * 0.0002, // Adjust the rotation speed here
child: ClipRRect(
borderRadius: BorderRadius.circular(100), // Adjust the radius as needed
borderRadius: BorderRadius.circular(120), // Adjust the radius as needed
child: Image.asset(
state.imagePaths[state.currentImageIndex],
height: containerHeight / 3, // Adjust image height
......@@ -232,6 +265,13 @@ class _TindBookContentState extends State<TindBookContent> {
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5),
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
......@@ -245,11 +285,18 @@ class _TindBookContentState extends State<TindBookContent> {
),
),
SizedBox(height: 5),
Text(
'un tres bon livre qui parle de beaucoup chose , notamment mais aussi de lorem ipsum dolor sit amet a m Doctrine est pas de ',
style: TextStyle(
Container(
decoration: BoxDecoration(
color: Colors.white,
fontSize: 16,
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.all(8),
child: Text(
'un tres bon livre qui parle de beaucoup chose , notamment mais aussi de lorem ipsum dolor sit amet a m Doctrine est pas de ',
style: TextStyle(
color: Colors.black,
fontSize: 16,
),
),
),
],
......@@ -264,14 +311,126 @@ class _TindBookContentState extends State<TindBookContent> {
}
}
class SwipeFeedback extends StatefulWidget {
final bool isSwipeRight;
const SwipeFeedback({Key? key, required this.isSwipeRight}) : super(key: key);
@override
_SwipeFeedbackState createState() => _SwipeFeedbackState();
}
class _SwipeFeedbackState extends State<SwipeFeedback> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
late Timer _timer;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 250),
);
_animation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(_controller);
_controller.forward();
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_timer = Timer(Duration(milliseconds: 500), () {
Navigator.of(context).pop(); // Dismiss the dialog after 500 milliseconds
});
} else if (status == AnimationStatus.dismissed) {
_controller.dispose();
}
});
}
@override
Widget build(BuildContext context) {
return Center(
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Opacity(
opacity: 1.0 - _animation.value,
child: Transform.scale(
scale: 1.0 + _animation.value * 0.5,
child: Icon(
widget.isSwipeRight ? Icons.favorite : Icons.close,
color: widget.isSwipeRight ? Colors.green : Colors.red,
size: 400.0,
),
),
);
},
),
);
}
@override
void dispose() {
_controller.dispose();
_timer.cancel(); // Cancel the timer when disposing the widget
super.dispose();
}
}
class FavoritePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
TindBookState state = Provider.of<TindBookState>(context);
return Scaffold(
appBar: AppBar(
title: Text('Favorite Books'),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.7,
),
itemCount: state.swipedRightBooks.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageScreen(imagePath: state.swipedRightBooks[index]),
),
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
state.swipedRightBooks[index],
fit: BoxFit.cover,
),
),
);
},
),
);
}
}
class ImageScreen extends StatelessWidget {
final String imagePath;
const ImageScreen({Key? key, required this.imagePath}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Text('Test'),
],
appBar: AppBar(),
body: Center(
child: Image.asset(imagePath),
),
);
}
......
tp1/pubspec.yaml
View file @ 888706d5
......@@ -26,4 +26,6 @@ flutter:
assets:
- assets/images/1.jpg
- assets/images/2.jpg
- assets/images/3.jpg
- assets/images/4.jpg
- assets/images/passeur.png
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment