Skip to content
This repository has been archived by the owner on Nov 28, 2024. It is now read-only.

Commit

Permalink
Recipe Selection (6/n) - Recipe Image
Browse files Browse the repository at this point in the history
  • Loading branch information
@aadityayadav17
aadityayadav17 committed Sep 19, 2024
1 parent d60ee75 commit 2c59ae4
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 135 deletions.
292 changes: 157 additions & 135 deletions lib/screens/recipe_selection_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,163 +21,185 @@ class RecipeSelectionScreen extends StatelessWidget {
},
),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// Discover and Recipe Texts with 4 and Selected on new lines
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Discover",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 28, // Slightly larger
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// Discover and Recipe Texts with 4 and Selected on new lines
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Discover",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 28, // Slightly larger
),
),
),
Text(
"Recipe",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 28,
Text(
"Recipe",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 28,
),
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"4", // Or dynamically set this value
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"4", // Or dynamically set this value
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
Text(
"Selected",
style: TextStyle(
color: Colors.black,
fontSize: 18,
Text(
"Selected",
style: TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
],
),
],
),

const SizedBox(height: 16),
],
),
],
),

const Spacer(flex: 2), // Add spacer to push the card down
const SizedBox(height: 16),

// Recipe Card
Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20), // Adjusted for more rounded corners
// Image Card
Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20), // To match the card
child: Image.asset(
'assets/examples/screens/recipe_selection_screen/AlmondMilkPorridge.jpeg',
width: double.infinity,
height: 200,
fit: BoxFit.cover,
),
),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Icon Row (Easy, Time, Price)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildIconText(

const SizedBox(height: 16),

// Recipe Information Card
Card(
elevation: 4,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20), // Adjusted for more rounded corners
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Icon Row (Easy, Time, Price)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildIconText(
'assets/icons/screens/recipe_selection_screen/cooking-difficulty-easy.png',
'Easy'),
_buildIconText(
'Easy',
),
_buildIconText(
'assets/icons/screens/recipe_selection_screen/time-clock.png',
'20 min'),
_buildIconText(
'20 min',
),
_buildIconText(
'assets/icons/screens/recipe_selection_screen/price.png',
'Price'),
],
),
const SizedBox(height: 16),
// Calories & Protein Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildIconText(
'Price',
),
],
),
const SizedBox(height: 16),
// Calories & Protein Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildIconText(
'assets/icons/screens/recipe_selection_screen/calories.png',
'XX Calories'),
_buildIconText(
'XX Calories',
),
_buildIconText(
'assets/icons/screens/recipe_selection_screen/protein.png',
'XX Protein'),
],
),
const SizedBox(height: 16),
// Recipe Name
const Text(
'Recipe Name Recipe Name',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
'XX Protein',
),
],
),
),
const Text(
'Recipe Name Recipe Name',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
const SizedBox(height: 16),
// Recipe Name
const Text(
'Recipe Name Recipe Name',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 16),
],
const Text(
'Recipe Name Recipe Name',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
const SizedBox(height: 16),
],
),
),
),
),

const SizedBox(height: 16),
const SizedBox(height: 16),

// Done Button and Add/Remove Buttons
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// Remove button with background
_buildActionIconWithBackground(
'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
'assets/icons/screens/recipe_selection_screen/recipe-rejected.png',
),
// Done Button and Add/Remove Buttons
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// Remove button with background
_buildActionIconWithBackground(
'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
'assets/icons/screens/recipe_selection_screen/recipe-rejected.png',
),

// Done Button
ElevatedButton(
onPressed: () {
// Handle Done action
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, // Background color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
// Done Button
ElevatedButton(
onPressed: () {
// Handle Done action
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, // Background color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.symmetric(
horizontal: 32, vertical: 12),
),
padding: const EdgeInsets.symmetric(
horizontal: 32, vertical: 12),
child: const Text('Done'),
),
child: const Text('Done'),
),

// Add button with background
_buildActionIconWithBackground(
'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
'assets/icons/screens/recipe_selection_screen/recipe-accepted.png',
),
],
),

const Spacer(flex: 1), // Adjust this as needed
],
// Add button with background
_buildActionIconWithBackground(
'assets/icons/screens/recipe_selection_screen/recipe-reject-accept-rectangle.png',
'assets/icons/screens/recipe_selection_screen/recipe-accepted.png',
),
],
),
],
),
),
),
bottomNavigationBar: BottomNavigationBar(
Expand Down
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ flutter:
# - images/a_dot_ham.jpeg
# To add assets to your application, add an assets section, like this:
assets:
- assets/examples/screens/recipe_selection_screen/AlmondMilkPorridge.jpeg
- assets/icons/bottom_navigation/discover-recipe-off.png
- assets/icons/bottom_navigation/discover-recipe-on.png
- assets/icons/bottom_navigation/grocery-list-off.png
Expand Down

0 comments on commit 2c59ae4

Please # to comment.