diff --git a/assets/images/gangster_in_white.png b/assets/images/gangster_in_white.png new file mode 100644 index 0000000..f03179c Binary files /dev/null and b/assets/images/gangster_in_white.png differ diff --git a/lib/main.dart b/lib/main.dart index 537f476..93a592b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -27,7 +27,7 @@ class MainEntry extends ConsumerWidget { darkTheme: ref.watch(darkThemeProvider), themeMode: ref.watch(themeModeProvider), // This is a first draft for responsiveness. Will be improved later. - home: const OnboardingScreen(), + home: OnboardingScreen(), ); } } diff --git a/lib/screens/onboarding_screen.dart b/lib/screens/onboarding_screen.dart index d4c91b5..c3a86c4 100644 --- a/lib/screens/onboarding_screen.dart +++ b/lib/screens/onboarding_screen.dart @@ -1,23 +1,26 @@ +import 'dart:ui'; + import 'package:cosanostr/all_imports.dart'; -class OnboardingScreen extends StatefulWidget { +class OnboardingScreen extends ConsumerStatefulWidget { const OnboardingScreen({super.key}); @override - State createState() { + OnboardingScreenState createState() { return OnboardingScreenState(); } } -class OnboardingScreenState extends State { +class OnboardingScreenState extends ConsumerState { late PageController pageController; int currentPageIndex = 0; - int currentPositionIndex = 0; + static const Duration kDuration = Duration(milliseconds: 500); + static const Curve kCurve = Curves.bounceOut; @override void initState() { super.initState(); - pageController = PageController(); + pageController = PageController(initialPage: currentPageIndex); } @override @@ -26,64 +29,106 @@ class OnboardingScreenState extends State { super.dispose(); } + Future nextFunction() async { + await pageController.nextPage( + duration: kDuration, + curve: kCurve, + ); + } + + Future previousFunction() async { + await pageController.previousPage( + duration: kDuration, + curve: kCurve, + ); + } + + Future onChangedFunction(int index) async { + setState(() { + currentPageIndex = index; + }); + } + @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: PageView( - controller: pageController, - onPageChanged: (int index) { - setState(() { - currentPageIndex = index; - }); - }, - children: [ - OnboardingPage( - title: 'Welcome to Cosanostr', - description: - 'Cosanostr is a social media app for sharing your thoughts and ideas with the world.', - imagePath: 'assets/images/onboarding0.png', + body: Stack( + children: [ + ScrollConfiguration( + behavior: const ScrollBehavior().copyWith( + scrollbars: false, + dragDevices: { + PointerDeviceKind.touch, + PointerDeviceKind.mouse, + PointerDeviceKind.trackpad, + PointerDeviceKind.stylus, + }, ), - OnboardingPage( - title: 'Share your thoughts', - description: 'Share your thoughts and ideas with the world.', - imagePath: 'assets/images/onboarding1.png', + child: SingleChildScrollView( + child: SizedBox( + height: MediaQuery.sizeOf(context).height, + width: MediaQuery.sizeOf(context).width, + child: PageView( + controller: pageController, + onPageChanged: onChangedFunction, + children: const [ + OnboardingPageOne(), + OnboardingPageTwo(), + OnboardingPageThree(), + ], + ), + ), ), - OnboardingPage( - title: 'Share your thoughts', - description: 'Share your thoughts and ideas with the world.', - imagePath: 'assets/images/onboarding2.png', + ), + Positioned( + bottom: MediaQuery.sizeOf(context).height * 0.2, + left: 30, + child: Row( + children: [ + Indicator( + positionIndex: 0, + currentIndex: currentPageIndex, + ), + const SizedBox( + width: 10, + ), + Indicator( + positionIndex: 1, + currentIndex: currentPageIndex, + ), + const SizedBox( + width: 10, + ), + Indicator( + positionIndex: 2, + currentIndex: currentPageIndex, + ), + ], ), - OnboardingPage( - title: 'Share your thoughts', - description: 'Share your thoughts and ideas with the world.', - imagePath: 'assets/images/onboarding3.png', + ), + Positioned( + bottom: MediaQuery.sizeOf(context).height * 0.1, + left: 30, + child: Row( + children: [ + InkWell( + onTap: previousFunction, + child: const Text('Previous'), + ), + const SizedBox(width: 36.0), + InkWell( + onTap: nextFunction, + child: const Text('Next'), + ), + ], ), - ], - ), + ) + ], ), ); } } -class OnboardingPage extends StatelessWidget { - const OnboardingPage({ - super.key, - required this.title, - required this.description, - required this.imagePath, - }); - - final String title; - final String description; - final String imagePath; - - @override - Widget build(BuildContext context) { - return const Placeholder(); - } -} - class Indicator extends StatelessWidget { const Indicator({ super.key, @@ -97,12 +142,184 @@ class Indicator extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - height: 12, - width: 12, + height: 16, + width: 16, decoration: BoxDecoration( border: Border.all(color: Colors.blue), color: positionIndex == currentIndex ? Colors.blue : Colors.transparent, - borderRadius: BorderRadius.circular(100), + borderRadius: BorderRadius.circular(4), + ), + ); + } +} + +class OnboardingPageOne extends StatelessWidget { + const OnboardingPageOne({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Expanded( + child: Padding( + padding: EdgeInsets.only(left: 16.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "So you've decided to check out CosaNostr!", + textAlign: TextAlign.center, + ), + SizedBox(height: 16.0), + Text( + "Before we can let you join the family...", + textAlign: TextAlign.center, + ), + SizedBox(height: 16.0), + Text( + "Let's get you set up!", + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/gangster_in_white.png', + ), + ), + ], + ), + ), + ], + ), + ); + } +} + +class OnboardingPageTwo extends StatelessWidget { + const OnboardingPageTwo({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/gangster_in_white.png', + ), + ), + ], + ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.only(right: 16.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + "Are you familiar with Nostr?", + textAlign: TextAlign.center, + ), + const SizedBox(height: 16.0), + TextButton( + onPressed: () async { + await Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) { + return const ResponsiveLayout(); + }, + ), + ); + }, + child: const Text("JUMP RIGHT IN"), + ), + const SizedBox(height: 16.0), + const Text( + "Otherwise, let's get you some keys!", + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + ], + ), + ); + } +} + +class OnboardingPageThree extends StatelessWidget { + const OnboardingPageThree({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Expanded( + child: Padding( + padding: EdgeInsets.only(left: 16.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'We will give you access to Nostr with a public and private key.', + textAlign: TextAlign.center, + ), + SizedBox(height: 16.0), + Text( + ''' +The public key can be shared with anyone and is a way to find you within the Nostr network. The private key is yours and yours alone... do not ever, under any circumstance share it with anyone. This key is used to sign transactions and verify your identity.''', + textAlign: TextAlign.center, + ), + SizedBox(height: 16.0), + Text( + 'We will generate keys and show them to you, we advise you to write them down and keep them safe.', + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Image.asset( + 'assets/images/gangster_in_white.png', + ), + ), + ], + ), + ), + ], ), ); }