Changed first page to a header a body and a footer

This commit is contained in:
Eggmac 2024-02-18 22:43:02 +01:00
parent 4e83ec3e6d
commit e9ce7aa814
4 changed files with 135 additions and 4 deletions

BIN
assets/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

5
assets/images/logo.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="53" height="41" viewBox="0 0 53 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5042 10.9066C23.5986 10.2196 22.9317 9.53712 22.4779 9.00402C22.9349 8.47267 23.6097 7.79085 24.5318 7.1036C26.5628 5.58992 29.8567 4 34.8295 4C38.7355 4 41.8766 5.53451 44.0828 7.12303C44.9738 7.76462 45.6993 8.40613 46.2444 8.9393C45.6358 9.49443 44.8215 10.1726 43.8326 10.8501C41.47 12.469 38.2376 14 34.5 14C29.7071 14 26.4994 12.4202 24.5042 10.9066ZM50.5965 7.79533C50.597 7.79602 50.5975 7.79668 49 9C50.5258 10.293 50.5254 10.2935 50.5249 10.2941L50.5238 10.2954L50.5211 10.2985L50.5142 10.3066L50.4937 10.3303C50.4772 10.3495 50.4548 10.3751 50.4266 10.4068C50.3703 10.4701 50.291 10.5579 50.1894 10.6666C49.9864 10.8838 49.6936 11.1853 49.3176 11.5429C48.5673 12.2566 47.4757 13.2028 46.0936 14.1498C43.3482 16.031 39.3305 18 34.5 18C28.7475 18 24.7051 16.0798 22.0867 14.0934C20.7878 13.108 19.8523 12.117 19.2331 11.3582C18.9232 10.9784 18.691 10.655 18.5309 10.4169C18.4508 10.2978 18.3886 10.1998 18.3435 10.1265C18.3209 10.0899 18.3027 10.0593 18.2885 10.0354L18.2705 10.0045L18.2638 9.99281L18.261 9.98795L18.2598 9.98576C18.2592 9.98474 18.2587 9.98374 20 9C18.2587 8.01625 18.2592 8.01522 18.2598 8.01417L18.2611 8.01192L18.264 8.00694L18.2708 7.99503L18.2891 7.96363C18.3034 7.93937 18.322 7.90852 18.3448 7.87154C18.3904 7.79758 18.4532 7.69896 18.5342 7.57924C18.6959 7.33994 18.9304 7.01539 19.2442 6.63452C19.8712 5.87349 20.8196 4.88158 22.1415 3.8964C24.8065 1.91008 28.9274 0 34.8295 0C39.8213 0 43.7654 1.96549 46.4201 3.87696C47.7505 4.83491 48.7771 5.79299 49.4762 6.51737C49.8266 6.88038 50.097 7.18713 50.2844 7.40921C50.3782 7.52033 50.4514 7.61049 50.5037 7.67618C50.5298 7.70903 50.5507 7.73579 50.5664 7.75601L50.5859 7.7814L50.5927 7.79032L50.5954 7.79382L50.5965 7.79533ZM20 9L18.2587 9.98374L17.7029 8.99999L18.2587 8.01625L20 9ZM49 9L50.5975 7.79668L51.5592 9.07348L50.5258 10.293L49 9ZM10.636 23V0.454545H6.15554L0.574219 3.98828V8.21555L5.73722 4.97905H5.86932V23H10.636Z" fill="black"/>
<path d="M1.45916 39V28.8182H8.31996V30.593H3.61186V33.0192H7.96697V34.794H3.61186V37.2251H8.33984V39H1.45916ZM9.99165 39V31.3636H12.1096V39H9.99165ZM11.0556 30.3793C10.7407 30.3793 10.4706 30.2749 10.2452 30.0661C10.0231 29.8539 9.91211 29.6004 9.91211 29.3054C9.91211 29.0137 10.0231 28.7635 10.2452 28.5547C10.4706 28.3426 10.7407 28.2365 11.0556 28.2365C11.3704 28.2365 11.6389 28.3426 11.861 28.5547C12.0864 28.7635 12.199 29.0137 12.199 29.3054C12.199 29.6004 12.0864 29.8539 11.861 30.0661C11.6389 30.2749 11.3704 30.3793 11.0556 30.3793ZM15.924 34.5852V39H13.8061V31.3636H15.8246V32.7109H15.9141C16.0831 32.2668 16.3665 31.9155 16.7642 31.657C17.1619 31.3951 17.6442 31.2642 18.2109 31.2642C18.7412 31.2642 19.2036 31.3802 19.598 31.6122C19.9924 31.8442 20.299 32.1757 20.5178 32.6065C20.7365 33.0341 20.8459 33.5445 20.8459 34.1378V39H18.728V34.5156C18.7313 34.0483 18.612 33.6837 18.37 33.4219C18.1281 33.1567 17.795 33.0241 17.3707 33.0241C17.0857 33.0241 16.8338 33.0855 16.6151 33.2081C16.3996 33.3307 16.2306 33.5097 16.108 33.745C15.9886 33.977 15.9273 34.2571 15.924 34.5852ZM23.0222 39V28.8182H23.9121V32.8203H23.9917C24.0911 32.5916 24.2336 32.3563 24.4192 32.1143C24.6081 31.8724 24.8551 31.6702 25.16 31.5078C25.4682 31.3421 25.856 31.2592 26.3233 31.2592C26.9498 31.2592 27.4999 31.425 27.9739 31.7564C28.4479 32.0845 28.8174 32.5452 29.0826 33.1385C29.3477 33.7285 29.4803 34.4162 29.4803 35.2017C29.4803 35.9905 29.3477 36.6816 29.0826 37.2749C28.8207 37.8681 28.4528 38.3305 27.9789 38.6619C27.5082 38.9934 26.9614 39.1591 26.3382 39.1591C25.8742 39.1591 25.4864 39.0762 25.1749 38.9105C24.8667 38.7448 24.6181 38.541 24.4292 38.299C24.2402 38.0537 24.0944 37.8151 23.9917 37.5831H23.8823V39H23.0222ZM23.8972 35.1868C23.8972 35.8033 23.9883 36.3501 24.1706 36.8274C24.3562 37.3014 24.6214 37.6742 24.9661 37.946C25.3141 38.2145 25.735 38.3487 26.2289 38.3487C26.736 38.3487 27.1652 38.2095 27.5165 37.9311C27.8678 37.6494 28.1346 37.2699 28.3169 36.7926C28.4992 36.3153 28.5904 35.7801 28.5904 35.1868C28.5904 34.6001 28.4992 34.0715 28.3169 33.6009C28.138 33.1302 27.8728 32.7573 27.5215 32.4822C27.1702 32.2038 26.7393 32.0646 26.2289 32.0646C25.7317 32.0646 25.3091 32.1989 24.9611 32.4673C24.6164 32.7325 24.3529 33.1004 24.1706 33.571C23.9883 34.0384 23.8972 34.5769 23.8972 35.1868ZM32.3091 28.8182V39H31.4242V28.8182H32.3091ZM34.6607 39V31.3636H35.5506V39H34.6607ZM35.1131 30.0511C34.9308 30.0511 34.775 29.9898 34.6458 29.8672C34.5165 29.7412 34.4519 29.5904 34.4519 29.4148C34.4519 29.2391 34.5165 29.09 34.6458 28.9673C34.775 28.8414 34.9308 28.7784 35.1131 28.7784C35.2954 28.7784 35.4512 28.8414 35.5804 28.9673C35.7097 29.09 35.7743 29.2391 35.7743 29.4148C35.7743 29.5904 35.7097 29.7412 35.5804 29.8672C35.4512 29.9898 35.2954 30.0511 35.1131 30.0511ZM40.8739 39.1591C40.1912 39.1591 39.5962 38.9884 39.0891 38.647C38.5853 38.3056 38.1942 37.8383 37.9158 37.245C37.6374 36.6518 37.4982 35.9756 37.4982 35.2166C37.4982 34.451 37.6391 33.7699 37.9208 33.1733C38.2058 32.5767 38.6003 32.1094 39.104 31.7713C39.6078 31.4299 40.1928 31.2592 40.859 31.2592C41.3694 31.2592 41.8318 31.3587 42.2461 31.5575C42.6604 31.7531 43.0018 32.0298 43.2702 32.3878C43.542 32.7424 43.7127 33.1567 43.7823 33.6307H42.8874C42.7946 33.1998 42.5709 32.8319 42.2163 32.527C41.8649 32.2187 41.4175 32.0646 40.8739 32.0646C40.3867 32.0646 39.9558 32.1972 39.5813 32.4624C39.2068 32.7242 38.9135 33.0904 38.7013 33.5611C38.4925 34.0284 38.3881 34.5703 38.3881 35.1868C38.3881 35.8066 38.4909 36.3551 38.6964 36.8324C38.9019 37.3063 39.1902 37.6776 39.5614 37.946C39.936 38.2145 40.3735 38.3487 40.8739 38.3487C41.212 38.3487 41.5202 38.2857 41.7987 38.1598C42.0804 38.0305 42.3157 37.8482 42.5046 37.6129C42.6969 37.3776 42.8261 37.0975 42.8924 36.7727H43.7873C43.721 37.2334 43.5569 37.6444 43.2951 38.0057C43.0366 38.3636 42.7002 38.6454 42.2859 38.8509C41.8749 39.0563 41.4042 39.1591 40.8739 39.1591ZM46.4893 36.1165L46.4794 34.9581H46.6783L50.2578 31.3636H51.3764L47.8416 34.9034L47.7621 34.9183L46.4893 36.1165ZM45.6839 39V28.8182H46.5689V39H45.6839ZM50.4418 39L47.3395 35.0774L47.9759 34.4659L51.5753 39H50.4418Z" fill="black"/>
<circle cx="28" cy="9" r="6" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 6.1 KiB

View File

@ -8,7 +8,7 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Recipes',
//title: 'Recipes',
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch().copyWith(
primary: Color(0xff263341),

View File

@ -5,7 +5,133 @@ import 'package:learn_project/utils/data.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var body = Container(
var body = SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
//Header Container
Container(
padding: const EdgeInsets.all(8.0),
height: 96,
color: Colors.white,
alignment: Alignment.center,
child: Column(
children: <Widget>[
SizedBox(
height: 70, //height of button
//width of button
child: IconButton(
icon: Image.asset('assets/images/logo.png'),
onPressed: () {},
),
),
],
),
),
//Body Container
Expanded(
/* child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Column(
children: <Widget>[
Container(
color: Colors.red,
height: 200.0,
alignment: Alignment.center,
child: Text("Content 1"),
),
Container(
color: Colors.green,
height: 300.0,
alignment: Alignment.center,
child: Text("Content 1"),
),
//TextField nearly at bottom
TextField(
decoration: InputDecoration(hintText: "Enter Text Here"),
),
],
),
), */
child: GridView.builder(
shrinkWrap: false,
itemCount: Data.recipes.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(
recipe: Data.recipes[index],
)));
},
child: Card(
color: Color(0xff8DB646),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
width: MediaQuery.of(context).size.width / 2,
height: 50,
child: Column(
children: <Widget>[
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Hero(
tag: Data.recipes[index].id,
child: FadeInImage(
image: NetworkImage(
Data.recipes[index].imageUrl),
fit: BoxFit.cover,
placeholder: AssetImage(
'assets/images/loading.gif'),
),
),
),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
Data.recipes[index].title,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 20,
fontWeight: FontWeight.bold),
),
)
],
),
),
),
),
);
}),
),
//Footer Container
//Here you will get unexpected behaviour when keyboard pops-up.
//So its better to use `bottomNavigationBar` to avoid this.
Container(
padding: const EdgeInsets.all(8.0),
color: Colors.white,
alignment: Alignment.center,
child: Text("Footer"),
),
],
),
);
var body2 = Container(
color: Color(0xff263341), //Theme.of(context).primaryColor,
child: GridView.builder(
shrinkWrap: false,
@ -72,7 +198,7 @@ class HomePage extends StatelessWidget {
);
return Scaffold(
appBar: AppBar(
/* appBar: AppBar(
centerTitle: true,
title: Text('Recipes'),
titleTextStyle: TextStyle(
@ -84,7 +210,7 @@ class HomePage extends StatelessWidget {
onPressed: () {},
)
],
),
), */
body: body,
);
}