ken/Motula-Translate-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add base interactive layout "rive" whit animation

Browse Source
This commit is contained in:
paoloGuagnano
2024-03-08 12:15:47 +01:00
parent 06336bd3d9
commit 2d5fba8897
58 changed files with 1946 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
motula_translate_app/lib/screens/home/components/course_card.dart Normal file
View File

@@ -0,0 +1,77 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CourseCard extends StatelessWidget {
const CourseCard({
Key? key,
required this.title,
this.color = const Color(0xFF7553F6),
this.iconSrc = "assets/icons/ios.svg",
}) : super(key: key);
final String title, iconSrc;
final Color color;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
height: 280,
width: 260,
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.all(Radius.circular(30)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 6, right: 8),
child: Column(
children: [
Text(
title,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: Colors.white, fontWeight: FontWeight.w600),
),
const Padding(
padding: EdgeInsets.only(top: 12, bottom: 8),
child: Text(
"Build and animate an iOS app from scratch",
style: TextStyle(
color: Colors.white38,
),
),
),
const Text(
"61 SECTIONS - 11 HOURS",
style: TextStyle(
color: Colors.white38,
),
),
const Spacer(),
Row(
children: List.generate(
3,
(index) => Transform.translate(
offset: Offset((-10 * index).toDouble(), 0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(
"assets/avaters/Avatar ${index + 1}.jpg",
),
),
),
),
),
],
),
),
),
SvgPicture.asset(iconSrc),
],
),
);
}
}

59
motula_translate_app/lib/screens/home/components/secondary_course_card.dart Normal file
View File

@@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class SecondaryCourseCard extends StatelessWidget {
const SecondaryCourseCard({
Key? key,
required this.title,
this.iconsSrc = "assets/icons/ios.svg",
this.colorl = const Color(0xFF7553F6),
}) : super(key: key);
final String title, iconsSrc;
final Color colorl;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
decoration: BoxDecoration(
color: colorl,
borderRadius: const BorderRadius.all(Radius.circular(20))),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: Theme.of(context).textTheme.headlineSmall!.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 4),
const Text(
"Watch video - 15 mins",
style: TextStyle(
color: Colors.white60,
fontSize: 16,
),
)
],
),
),
const SizedBox(
height: 40,
child: VerticalDivider(
// thickness: 5,
color: Colors.white70,
),
),
const SizedBox(width: 8),
SvgPicture.asset(iconsSrc)
],
),
);
}
}

70
motula_translate_app/lib/screens/home/home_screen.dart Normal file
View File

@@ -0,0 +1,70 @@
import 'package:flutter/material.dart';
import '../../model/course.dart';
import 'components/course_card.dart';
import 'components/secondary_course_card.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
bottom: false,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 40),
Padding(
padding: const EdgeInsets.all(20),
child: Text(
"Courses",
style: Theme.of(context).textTheme.headlineMedium!.copyWith(
color: Colors.black, fontWeight: FontWeight.bold),
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: courses
.map(
(course) => Padding(
padding: const EdgeInsets.only(left: 20),
child: CourseCard(
title: course.title,
iconSrc: course.iconSrc,
color: course.color,
),
),
)
.toList(),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Text(
"Recent",
style: Theme.of(context).textTheme.headlineSmall!.copyWith(
color: Colors.black, fontWeight: FontWeight.bold),
),
),
...recentCourses
.map((course) => Padding(
padding: const EdgeInsets.only(
left: 20, right: 20, bottom: 20),
child: SecondaryCourseCard(
title: course.title,
iconsSrc: course.iconSrc,
colorl: course.color,
),
))
.toList(),
],
),
),
),
);
}
}