546 lines
25 KiB
Dart
546 lines
25 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'Cafe.dart';
|
|
|
|
class PopularCafes extends StatelessWidget {
|
|
const PopularCafes({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
home: Container(
|
|
decoration: BoxDecoration(
|
|
color: Color.fromARGB(255, 32, 30, 30),
|
|
image: DecorationImage(
|
|
image: AssetImage("images/bg6.jpg"),
|
|
fit: BoxFit.cover,
|
|
colorFilter: ColorFilter.mode(
|
|
Colors.black.withOpacity(0.5), BlendMode.dstATop),
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
child: Scaffold(
|
|
backgroundColor: Colors.transparent,
|
|
body: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 26, horizontal: 12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
InkWell(
|
|
child: Icon(
|
|
Icons.arrow_circle_left_outlined,
|
|
color: Colors.white,
|
|
size: 29,
|
|
),
|
|
onTap: () => Navigator.pop(context),
|
|
),
|
|
const SizedBox(
|
|
//Margin between elements.
|
|
height: 10,
|
|
),
|
|
const Text(
|
|
'Popular',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 24,
|
|
),
|
|
textAlign: TextAlign.left,
|
|
),
|
|
const SizedBox(
|
|
//Margin between elements.
|
|
height: 12,
|
|
),
|
|
Center(
|
|
child: TextField(
|
|
decoration: InputDecoration(
|
|
filled: true,
|
|
fillColor:
|
|
Color.fromARGB(255, 67, 71, 68).withOpacity(0.7),
|
|
contentPadding: const EdgeInsets.only(
|
|
left: 14.0, bottom: 8.0, top: 8.0),
|
|
hintText: 'Search',
|
|
hintStyle: TextStyle(
|
|
color: Colors.white,
|
|
),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(50),
|
|
borderSide: BorderSide(color: Colors.white, width: 1),
|
|
),
|
|
prefixIcon: Icon(
|
|
Icons.search,
|
|
color: Colors.white,
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.white),
|
|
borderRadius: BorderRadius.circular(25.7),
|
|
),
|
|
),
|
|
style: TextStyle(
|
|
color: Color.fromARGB(255, 255, 255, 255),
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
//Margin between elements.
|
|
height: 12,
|
|
),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: <Widget>[
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(Icons.check),
|
|
label: Text("Comfy charis and sofas (14)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 10,
|
|
),
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(Icons.abc),
|
|
label: Text("Longer study sessions (1)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 10,
|
|
),
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(Icons.abc),
|
|
label: Text("Longer study sessions (1)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 10,
|
|
),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: <Widget>[
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(null),
|
|
label: Text("Coffee promo(8)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 10,
|
|
),
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(null),
|
|
label: Text("Background Music (1)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 10,
|
|
),
|
|
ElevatedButton.icon(
|
|
onPressed: () {},
|
|
icon: Icon(null),
|
|
label: Text("Outdoor Session (2)"),
|
|
style: ButtonStyle(
|
|
shape: MaterialStateProperty.all<
|
|
RoundedRectangleBorder>(
|
|
RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(16.0),
|
|
//side: BorderSide(color: )
|
|
),
|
|
),
|
|
backgroundColor: MaterialStateProperty.all(
|
|
Color.fromARGB(255, 70, 71, 70).withOpacity(0.7),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(15),
|
|
child: Image(
|
|
image: NetworkImage(
|
|
'https://images.unsplash.com/photo-1600093463592-8e36ae95ef56?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
|
|
),
|
|
width: 200,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 5,
|
|
),
|
|
Column(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'Cykelcafe Le Mond',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 16,
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'5.0\$',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 16,
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[100],
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
child: InkWell(
|
|
onTap: () => Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => const Cafe(),
|
|
),
|
|
),
|
|
child: Icon(
|
|
Icons.arrow_circle_right_rounded,
|
|
size: 60.0,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
alignment: Alignment.bottomRight,
|
|
width: 175,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
const SizedBox(
|
|
height: 20,
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(15),
|
|
child: Image(
|
|
image: NetworkImage(
|
|
'https://cdn.pixabay.com/photo/2017/04/19/13/03/coffee-2242213_960_720.jpg',
|
|
),
|
|
width: 200,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 5,
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'Cykelcafe Le Mond',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 8,
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'5.0\$',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 16,
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[900],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[100],
|
|
),
|
|
Icon(
|
|
Icons.star,
|
|
size: 22.0,
|
|
color: Colors.yellow[100],
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
child: InkWell(
|
|
onTap: () => print("hej"),
|
|
child: Icon(
|
|
Icons.arrow_circle_right_rounded,
|
|
size: 60.0,
|
|
semanticLabel: 'hejlabel',
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
alignment: Alignment.bottomRight,
|
|
width: 175,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
const SizedBox(
|
|
height: 20,
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(15),
|
|
child: Image(
|
|
image: NetworkImage(
|
|
'https://cdn.pixabay.com/photo/2017/04/19/13/03/coffee-2242213_960_720.jpg',
|
|
),
|
|
width: 200,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 5,
|
|
),
|
|
Column(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'Cykelcafe Le Mond',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 8,
|
|
),
|
|
Text(
|
|
'5\$',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
Container(
|
|
child: InkWell(
|
|
onTap: () => print("hej"),
|
|
child: Icon(
|
|
Icons.arrow_circle_right_rounded,
|
|
size: 60.0,
|
|
semanticLabel: 'hejlabel',
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
alignment: Alignment.bottomRight,
|
|
width: 175,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
const SizedBox(
|
|
height: 20,
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(15),
|
|
child: Image(
|
|
image: NetworkImage(
|
|
'https://cdn.pixabay.com/photo/2017/04/19/13/03/coffee-2242213_960_720.jpg',
|
|
),
|
|
width: 200,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 5,
|
|
),
|
|
Column(
|
|
mainAxisAlignment:
|
|
MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: <Widget>[
|
|
Text(
|
|
'Cykelcafe Le Mond',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 20,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 8,
|
|
),
|
|
Text(
|
|
'5\$',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 24,
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
Container(
|
|
child: InkWell(
|
|
onTap: () => print("hej"),
|
|
child: Icon(
|
|
Icons.arrow_circle_right_rounded,
|
|
size: 60.0,
|
|
semanticLabel: 'hejlabel',
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
alignment: Alignment.bottomRight,
|
|
width: 175,
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
//
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |