Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat#58/implementa onboarding #33

Merged
merged 7 commits into from
Dec 7, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/fonts/Amarante-Regular.ttf
Binary file not shown.
Binary file added assets/images/Component1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/Component2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/Component3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
215 changes: 215 additions & 0 deletions lib/ui/onboarding/view/onboarding_view.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
// lib/view/onboarding_page.dart
import 'package:flutter/material.dart';
import 'package:aranduapp/ui/register_account/view/RegisterAccount.dart';

class OnboardingView extends StatefulWidget {
const OnboardingView({super.key});

@override
_OnboardingViewState createState() => _OnboardingViewState();
}

class _OnboardingViewState extends State<OnboardingView> {
final PageController _pageController = PageController();
int _currentPage = 0;

// Dados do onboarding diretamente incorporados
final List<Map<String, String>> steps = [
{
'title': 'Lorem',
'description':
'AranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduArandu',
'imageAsset': 'assets/images/Component1.png',
},
{
'title': 'Lorem',
'description':
'AranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduArandu',
'imageAsset': 'assets/images/Component2.png',
},
{
'title': 'Lorem',
'description':
'AranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduAranduArandu',
'imageAsset': 'assets/images/Component3.png',
},
];

void _goToNextPage() {
if (_currentPage < steps.length - 1) {
_pageController.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeIn,
);
}
}

void _goToPreviousPage() {
if (_currentPage > 0) {
_pageController.previousPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeIn,
);
}
}

@override
void initState() {
super.initState();
_pageController.addListener(() {
int page = _pageController.page?.toInt() ?? 0;
if (_currentPage != page) {
setState(() {
_currentPage = page;
});
}
});
}

@override
void dispose() {
_pageController.dispose();
super.dispose();
}

Widget _buildOnboardingImage(String imageAsset) {
return Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: MediaQuery.of(context).size.height * 0.6,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imageAsset),
fit: BoxFit.cover,
),
),
),
);
}

Widget _buildOnboardingSteps() {
return Positioned(
top: MediaQuery.of(context).size.height * 0.6,
left: 0,
right: 0,
bottom: 0,
child: PageView.builder(
controller: _pageController,
itemCount: steps.length,
itemBuilder: (context, index) {
final step = steps[index];
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
step['title']!,
style: const TextStyle(
fontFamily: 'Amarante',
fontSize: 24,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.start,
),
const SizedBox(height: 20),
Text(
step['description']!,
style: const TextStyle(
fontFamily: 'Amarante',
fontSize: 18,
),
textAlign: TextAlign.justify,
),
],
),
);
},
),
);
}

Widget _buildNavigationButtons() {
return Positioned(
left: 10,
bottom: 48,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FloatingActionButton(
onPressed: _goToPreviousPage,
mini: true,
backgroundColor: Theme.of(context).colorScheme.primary,
child: const Icon(
Icons.arrow_back,
color: Colors.white,
),
),
if (_currentPage < steps.length - 1)
FloatingActionButton(
onPressed: _goToNextPage,
mini: true,
backgroundColor: Theme.of(context).colorScheme.primary,
child: const Icon(
Icons.arrow_forward,
color: Colors.white,
),
),
],
),
);
}

Widget _buildStartButton() {
return Positioned(
bottom: 50,
right: 30,
child: SizedBox(
width: 150,
height: 48,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
backgroundColor: Theme.of(context).colorScheme.primary,
),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const RegisterAccount(),
),
);
},
child: const Text(
'Começar',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: null,
body: Stack(
children: [
_buildOnboardingImage(steps[_currentPage]['imageAsset']!),
_buildOnboardingSteps(),
_buildNavigationButtons(),
if (_currentPage == steps.length - 1) _buildStartButton(),
],
),
);
}
}
50 changes: 50 additions & 0 deletions lib/ui/onboarding/viewModel/onboarding_view_model.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// lib/view_model/onboarding_view_model.dart
import 'package:flutter/material.dart';

class OnboardingViewModel extends ChangeNotifier {
int _currentStep = 0;

// Dados do onboarding diretamente incorporados
final List<Map<String, String>> steps = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

coloque essa lista na view

{
'title': 'Bem-vindo ao Arandu',
'description':
'Descubra como usar o aplicativo para maximizar sua experiência.',
'imageAsset': 'assets/images/Component1.png',
},
{
'title': 'Funcionalidades',
'description':
'Explore as funcionalidades únicas que tornam o Arandu especial.',
'imageAsset': 'assets/images/Component2.png',
},
{
'title': 'Comece agora',
'description': 'Configure sua conta e comece sua jornada com o Arandu.',
'imageAsset': 'assets/images/Component3.png',
},
];

int get currentStep => _currentStep;
int get totalSteps => steps.length;

void nextStep() {
if (_currentStep < steps.length - 1) {
_currentStep++;
notifyListeners();
}
}

void previousStep() {
if (_currentStep > 0) {
_currentStep--;
notifyListeners();
}
}

void completeOnboarding() {
// Aqui você pode armazenar o estado para indicar que o onboarding foi concluído.
// Por exemplo, usando SharedPreferences ou outro armazenamento local.
print("Onboarding concluído!");
}
}
33 changes: 15 additions & 18 deletions lib/ui/welcome/view/WelcomeView.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:aranduapp/core/log/Log.dart';
import 'package:aranduapp/ui/onboarding/view/onboarding_view.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

Expand All @@ -20,7 +21,7 @@ class WelcomeView extends StatelessWidget {

//Cículo com gradiente com possível logo sobreposta
Stack(
alignment: Alignment.center, //centraliza logo no cículo
alignment: Alignment.center,
children: [


Expand All @@ -31,14 +32,6 @@ class WelcomeView extends StatelessWidget {
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
// gradient: LinearGradient(
// colors:[
// Color(0xFFFB923C),
// Color(0xFFC2410C),
// ],
// begin: Alignment.topLeft,
// end: Alignment.bottomLeft,
// ),
),
),

Expand All @@ -58,20 +51,24 @@ class WelcomeView extends StatelessWidget {

//Botão de começar com gradiente
GestureDetector(
onTap: () => Log.d("tap"),
onTap: () => {


Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const OnboardingView(),
),
)


},


child: Container(
padding: const EdgeInsets.symmetric(horizontal:120, vertical: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Theme.of(context).colorScheme.primary,
// gradient: const LinearGradient(
// colors: [
// Color(0xFFFB923C),
// Color(0xFFC2410C),
// ],
// begin: Alignment.topLeft,
// end: Alignment.bottomLeft,
// ),
),
child: Text(
"Começar",
Expand Down
Loading