flutter/Openlib
1
0
Fork 0
mirror of https://github.com/dstark5/Openlib.git synced 2026-03-13 09:12:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

changed some styles and fixed search layout overflow

Browse Source
This commit is contained in:
dstark5
2023-08-22 04:00:11 -07:00
parent c7b1fec73e
commit fbe1ee70c9
5 changed files with 178 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
lib/ui/components/book_card_widget.dart
View File

@@ -27,7 +27,7 @@ class BookInfoCard extends StatelessWidget {
shadowColor: Colors.black.withOpacity(0),
margin: const EdgeInsets.only(bottom: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Theme.of(context).colorScheme.surfaceVariant,
width: 1,
@@ -35,7 +35,7 @@ class BookInfoCard extends StatelessWidget {
),
child: InkWell(
onTap: onClick,
borderRadius: BorderRadius.circular(15),
borderRadius: BorderRadius.circular(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
@@ -45,7 +45,7 @@ class BookInfoCard extends StatelessWidget {
imageUrl: thumbnail ?? "",
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
borderRadius: BorderRadius.circular(5),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
@@ -54,7 +54,7 @@ class BookInfoCard extends StatelessWidget {
),
placeholder: (context, url) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.surfaceVariant,
),
height: 120,
@@ -63,7 +63,7 @@ class BookInfoCard extends StatelessWidget {
errorWidget: (context, url, error) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.surfaceVariant,
),
height: 120,

58
lib/ui/components/book_info_widget.dart
View File

@@ -24,40 +24,42 @@ class BookInfoWidget extends StatelessWidget {
width: double.infinity,
height: 30,
),
CachedNetworkImage(
height: 240,
width: 180,
imageUrl: data.thumbnail,
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(15)),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
),
placeholder: (context, url) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
Center(
child: CachedNetworkImage(
height: 240,
width: 180,
),
errorWidget: (context, url, error) {
return Container(
imageUrl: data.thumbnail,
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10)),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
),
placeholder: (context, url) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
height: 230,
width: 170,
child: const Center(
child: Icon(Icons.image_rounded),
),
);
},
height: 240,
width: 180,
),
errorWidget: (context, url, error) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
height: 230,
width: 170,
child: const Center(
child: Icon(Icons.image_rounded),
),
);
},
),
),
_TopPaddedText(
text: data.title,

4
lib/ui/components/page_title_widget.dart
View File

@@ -11,8 +11,8 @@ class TitleText extends StatelessWidget {
child: Text(
text,
style: const TextStyle(
fontSize: 40,
// fontWeight: FontWeight.w500,
fontSize: 25,
fontWeight: FontWeight.w500,
// color: Theme.of(context).colorScheme.onInverseSurface,
),
),

195
lib/ui/search_page.dart
View File

@@ -65,7 +65,7 @@ class SearchPage extends ConsumerWidget {
filled: true,
// hintStyle: const TextStyle(
// color: Colors.grey, fontWeight: FontWeight.bold),
hintText: "Harry Potter and th...",
hintText: "Search books ,author or ISBN",
// fillColor: Theme.of(context).colorScheme.primary,
),
onSubmitted: (String value) => onSubmit(context, ref),
@@ -79,124 +79,93 @@ class SearchPage extends ConsumerWidget {
},
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 7, right: 7, top: 19),
child: SizedBox(
width: 200,
child: DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Type',
labelStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.secondary,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius:
const BorderRadius.all(Radius.circular(50)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius:
const BorderRadius.all(Radius.circular(50)),
),
),
icon: const Icon(Icons.arrow_drop_down),
value: dropdownTypeValue,
items: typeValues.keys
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontSize: 14),
),
);
}).toList(),
onChanged: (String? val) {
ref.read(selectedTypeState.notifier).state = val ?? '';
},
Padding(
padding: const EdgeInsets.only(left: 7, right: 7, top: 19),
child: SizedBox(
width: 250,
child: DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Type',
labelStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.secondary,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
),
icon: const Icon(Icons.arrow_drop_down),
value: dropdownTypeValue,
items: typeValues.keys
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontSize: 14),
),
);
}).toList(),
onChanged: (String? val) {
ref.read(selectedTypeState.notifier).state = val ?? '';
},
),
Padding(
padding: const EdgeInsets.only(left: 7, right: 7, top: 19),
child: SizedBox(
width: 150,
child: DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Sort by',
labelStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.secondary,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius:
const BorderRadius.all(Radius.circular(50)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius:
const BorderRadius.all(Radius.circular(50)),
),
),
value: dropdownSortValue,
items: sortValues.keys
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontSize: 14),
),
);
}).toList(),
onChanged: (String? val) {
ref.read(selectedSortState.notifier).state = val ?? '';
},
),
),
)
],
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(),
onPressed: () {
onSubmit(context, ref);
padding: const EdgeInsets.only(left: 7, right: 7, top: 19),
child: SizedBox(
width: 210,
child: DropdownButtonFormField(
decoration: InputDecoration(
labelText: 'Sort by',
labelStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.secondary,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).colorScheme.outline,
width: 2),
borderRadius: const BorderRadius.all(Radius.circular(50)),
),
),
value: dropdownSortValue,
items: sortValues.keys
.toList()
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontSize: 14),
),
);
}).toList(),
onChanged: (String? val) {
ref.read(selectedSortState.notifier).state = val ?? '';
},
child: const Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Search",
style: TextStyle(fontSize: 14),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: Icon(Icons.search, size: 18),
),
],
)),
)
),
),
),
],
),
),

131
lib/ui/trending_page.dart
View File

@@ -29,96 +29,83 @@ class TrendingPage extends ConsumerWidget {
padding: const EdgeInsets.all(5),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisCount: 3,
mainAxisSpacing: 10.0,
crossAxisSpacing: 13.0,
mainAxisExtent: 220,
mainAxisExtent: 205,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(
color: Theme.of(context).colorScheme.surfaceVariant,
width: 1,
),
),
shadowColor: Colors.black.withOpacity(0),
// shape: const RoundedRectangleBorder(
// borderRadius:
// BorderRadius.all(Radius.circular(20.0))),
child: InkWell(
borderRadius: BorderRadius.circular(10),
onTap: () {
Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return ResultPage(
searchQuery: data[index].title!,
);
}));
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CachedNetworkImage(
height: imageHeight,
width: imageWidth,
imageUrl: data[index].thumbnail!,
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(5)),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
return InkWell(
borderRadius: BorderRadius.circular(10),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return ResultPage(
searchQuery: data[index].title!,
);
}));
},
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CachedNetworkImage(
height: imageHeight,
width: imageWidth,
imageUrl: data[index].thumbnail!,
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(5)),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
placeholder: (context, url) => Container(
),
placeholder: (context, url) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
// color: "#E3E8E9".toColor(),
color: Theme.of(context)
.colorScheme
.surfaceVariant,
),
height: imageHeight,
width: imageWidth,
),
errorWidget: (context, url, error) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
// color: "#E3E8E9".toColor(),
color: Theme.of(context)
.colorScheme
.surfaceVariant,
),
height: imageHeight,
width: imageWidth,
),
errorWidget: (context, url, error) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context)
.colorScheme
.surfaceVariant,
),
height: imageHeight,
width: imageWidth,
child: const Center(
child: Icon(Icons.image_rounded),
),
);
},
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: SizedBox(
width: imageWidth,
child: Text(
data[index].title!,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400),
maxLines: 2,
child: const Center(
child: Icon(Icons.image_rounded),
),
);
},
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: SizedBox(
width: imageWidth,
child: Text(
data[index].title!,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400),
maxLines: 2,
),
),
]),
),
),
]),
);
},
childCount: data.length,