import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
// Main function to run the app.
void main() {
runApp(const MyApp());
}
// The main app widget.
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// Hide the debug banner.
debugShowCheckedModeBanner: false,
// App title.
title: 'Learning App',
// Set the app theme.
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green)),
// Set the home page.
home: const MyHomePage(title: 'Gfg French Learning App'),
);
}
}
// The home page widget.
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// Title of the home page.
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
// State class for the home page.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Center the title in the app bar.
centerTitle: true,
// Set the app bar title.
title: Text(widget.title),
// BackgroundColor of Appbar
backgroundColor: Colors.green,
// foregroundColor of Appbar
foregroundColor: Colors.white,
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
// Add some spacing.
const SizedBox(height: 20),
// Welcome message.
Text(
"What you want to learn today? ????????",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
// Style for the text.
color: Colors.green),
),
// Add some spacing.
const SizedBox(height: 20),
Container(
// Set the container height.
height: MediaQuery.of(context).size.height,
// Set the container width.
width: MediaQuery.of(context).size.width,
child: GridView.count(
// Number of columns in the grid.
crossAxisCount: 2,
// Aspect ratio of the grid items.
childAspectRatio: 1.0,
// Spacing between rows.
mainAxisSpacing: 10.0,
// Spacing between columns.
crossAxisSpacing: 10.0,
// Padding around the grid.
padding: const EdgeInsets.all(10.0),
children: <Widget>[
// Build a card for "Basics".
_buildCard("Basics"),
// Build a card for "Food".
_buildCard("Food"),
// Build a card for "Travel".
_buildCard("Travel"),
// Build a card for "School".
_buildCard("School"),
],
),
),
],
),
),
),
);
}
// Helper method to build a category card.
Widget _buildCard(String text) {
return GestureDetector(
onTap: () {
// Navigate to the flashcard screen when the card is tapped.
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => FlashcardScreen(category: text),
));
},
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
// Set the card background color.
color: const Color(0xffA7D397),
// Round the corners.
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
// Display the category name.
text,
style: const TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
}
// The flashcard screen widget.
class FlashcardScreen extends StatefulWidget {
// Category of flashcards to display.
final String category;
const FlashcardScreen({required this.category});
@override
State<FlashcardScreen> createState() =>
_FlashcardScreenState(category: category);
}
// State class for the flashcard screen.
class _FlashcardScreenState extends State<FlashcardScreen> {
// Category of flashcards.
final String category;
_FlashcardScreenState({required this.category});
// Current flashcard index.
var _currItem = 0;
// List to store flashcard data.
late List<Map<String, String>> jsonData;
// Key to control the flip card.
GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
// Style for the text on the flashcards.
TextStyle textStyle = TextStyle(
color: Colors.green.shade900, fontSize: 20, fontWeight: FontWeight.w600);
// Data for the flashcards.
var data = {
"Food": [
{"word": "Tea", "result": "Thé"},
{"word": "rice", "result": "riz"},
],
"Basics": [
{"word": "Bonjour", "result": "Hello"},
{"word": "Bye", "result": "Au revoir"},
],
"Travel": [
{"word": "Hostel", "result": "Auberge"},
{"word": "Journey", "result": "Voyage"},
],
"School": [
{"word": "Teacher", "result": "Professeure/Professeur"},
{"word": "classmate", "result": "camarade de classe"}
]
};
@override
void initState() {
super.initState();
// Load the flashcard data for the selected category.
jsonData = (data[this.category] as List).cast<Map<String, String>>();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// Set the background color.
backgroundColor: const Color(0xffA7D397),
appBar: AppBar(
// Center the title in the app bar.
centerTitle: true,
// Set the app bar title.
title: const Text("Learning Made Easy"),
// Add a shadow to the app bar.
elevation: 5,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Instruction text.
Text(
"Guess the Word and Flip! ????",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
// Add some spacing.
const SizedBox(height: 20),
// Add some spacing.
const SizedBox(height: 25),
SizedBox(
width: 300,
height: 300,
child: FlipCard(
// Key to control the flip card.
key: cardKey,
// Set the flip direction.
direction: FlipDirection.HORIZONTAL,
front: Card(
shape: RoundedRectangleBorder(
// Round the corners.
borderRadius: BorderRadius.circular(25)),
// Add a shadow to the card
elevation: 7,
// Set the shadow color.
shadowColor: Colors.grey,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
// Display the word.
child: Text(jsonData[_currItem]["word"] ?? "",
textAlign: TextAlign.center, style: textStyle),
),
),
),
back: Card(
shape: RoundedRectangleBorder(
// Round the corners.
borderRadius: BorderRadius.circular(25)),
// Add a shadow to the card.
elevation: 7,
// Set the shadow color
shadowColor: Colors.grey,
// Set the card background color.
color: Colors.yellow.shade200,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
// Display the result.
child: Text(jsonData[_currItem]["result"] ?? "",
textAlign: TextAlign.center, style: textStyle),
),
),
),
),
),
// Add some spacing.
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
setState(() {
// Move to the next flashcard.
_currItem = (_currItem + 1) % jsonData.length;
// Flip the card back to the front.
cardKey.currentState?.toggleCard();
});
},
// Button to go to the next flashcard.
child: const Text("Next"))
])));
}
}