diff --git a/frontend/memoree_client/lib/app/pages/app_scaffold.dart b/frontend/memoree_client/lib/app/pages/app_scaffold.dart index 7d9b3bd..eb09073 100755 --- a/frontend/memoree_client/lib/app/pages/app_scaffold.dart +++ b/frontend/memoree_client/lib/app/pages/app_scaffold.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:memoree_client/app/pages/landing.dart'; import 'package:provider/provider.dart'; import 'package:memoree_client/app/models/constants.dart'; @@ -33,7 +34,6 @@ class AppScaffold extends StatelessWidget { AppDrawer(isMobile: isMobileLayout,isTablet: isTabletLayout,), Container( child: Expanded( - // child: Container(child: Text(this._selectedPage)) child: Consumer2( builder: (_, search, drawer, __) { switch(drawer.state) @@ -41,7 +41,7 @@ class AppScaffold extends StatelessWidget { case PageTitles.videos: return Container( child: search.query == null ? - Center(child: Text("Carousel Page goes here")) : + LandingPage() : VideoPage(search.query) ); break; diff --git a/frontend/memoree_client/lib/app/pages/landing.dart b/frontend/memoree_client/lib/app/pages/landing.dart new file mode 100755 index 0000000..e476bc6 --- /dev/null +++ b/frontend/memoree_client/lib/app/pages/landing.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; +import 'package:memoree_client/app/models/constants.dart'; +import 'package:memoree_client/app/widgets/carousel.dart'; + +class LandingPage extends StatelessWidget { + // final List carouselList = PRESET_QUERIES.map((query) => Carousel(query)); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.fromLTRB(20, 20, 20, 0), + child: SingleChildScrollView( + child: Column( + children: [ + SizedBox( + height: 40, + child: Center( + child: Text("Common Topics", textScaleFactor: 1.75,), + ), + ), + Divider(), + Carousel("Hello World"), + Carousel("Earthy hi hi"), + Carousel("WUT WUT WUT"), + SizedBox(height: 50,) + ], + ), + ), + ); + } +} diff --git a/frontend/memoree_client/lib/app/widgets/carousel.dart b/frontend/memoree_client/lib/app/widgets/carousel.dart index c5c0f7e..e3a9474 100755 --- a/frontend/memoree_client/lib/app/widgets/carousel.dart +++ b/frontend/memoree_client/lib/app/widgets/carousel.dart @@ -1,21 +1,167 @@ +import 'dart:math'; + import 'package:flutter/material.dart'; class Carousel extends StatefulWidget { - final String name; final String query; - final double cardWidth; - Carousel(this.name, this.query, this.cardWidth); + Carousel(this.query); @override _CarouselState createState() => _CarouselState(); } class _CarouselState extends State { + bool _atStart, _atEnd; + ScrollController _scrollController; + ListView _listView; + + @override + void initState() { + super.initState(); + _atStart = true; + _atEnd = false; + + _scrollController = new ScrollController(); + _scrollController.addListener(_scrollListener); + + _listView = ListView.builder( + shrinkWrap: true, + scrollDirection: Axis.horizontal, + itemCount: 50, + controller: _scrollController, + itemBuilder: (context, index) { + return Container( + decoration: BoxDecoration( + color: [Colors.red, Colors.green, Colors.yellow][Random().nextInt(3)] + ), + height: 100, + width: 100, + child: Center(child: Text("$index")), + ); + }, + ); + } + + void _scrollListener() { + if(_scrollController.position.minScrollExtent == _scrollController.position.pixels) + setState(() { + _atStart = true; + _atEnd = false; + }); + else if(_scrollController.position.maxScrollExtent == _scrollController.position.pixels) + setState(() { + _atStart = false; + _atEnd = true; + }); + else if(_atStart || _atEnd) + setState(() { + _atStart = false; + _atEnd = false; + }); + } + + void _moveListRight(bool right) { + double pixelsToMove = 700; + double pixelDestination = (right) ? + _scrollController.offset + min(_scrollController.position.maxScrollExtent - _scrollController.offset, pixelsToMove) : + _scrollController.offset + -1 * min(_scrollController.offset - _scrollController.position.minScrollExtent, pixelsToMove); + + _scrollController.animateTo( + pixelDestination, + curve: Curves.linear, + duration: Duration(milliseconds: 250), + ); + } + @override Widget build(BuildContext context) { - return Container( - + return Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: EdgeInsets.only(top: 15.0, bottom: 15.0), + child: Text("HELLO WORLD", textAlign: TextAlign.left,) + ) + ), + Container( + height: 300, + child: Stack( + children: [ + Positioned.fill( + child: _listView, + ), + if(!_atStart) + Positioned( + top: 0, + left: 0, + height: 300, + width: 100, + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + stops: [0, 0.2], + colors: [ + Theme.of(context).scaffoldBackgroundColor, + Theme.of(context).scaffoldBackgroundColor.withOpacity(0), + ], + ), + ), + ), + ), + if(!_atStart) + Positioned( + top: 0, + left: 0, + height: 300, + child: TextButton( + child: Icon(Icons.keyboard_arrow_left, color: Colors.black,size: 36,), + onPressed: () { + _moveListRight(false); + }, + ), + ), + if(!_atEnd) + Positioned( + top: 0, + right: 0, + height: 300, + width: 100, + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerRight, + end: Alignment.centerLeft, + stops: [0, 0.2], + colors: [ + Theme.of(context).scaffoldBackgroundColor, + Theme.of(context).scaffoldBackgroundColor.withOpacity(0), + ], + ), + ), + ), + ), + if(!_atEnd) + Positioned( + top: 0, + right: 0, + height: 300, + child: TextButton( + child: Icon(Icons.keyboard_arrow_right, color: Colors.black,size: 36), + onPressed: () { + _moveListRight(true); + }, + ), + ), + ], + ), + ), + ], ); } -} \ No newline at end of file +}