Skip to content

Commit

Permalink
Merge pull request #56 from orevial/allow-for-more-customization
Browse files Browse the repository at this point in the history 
Allow some components to be customized
  • Loading branch information
@bazookon
bazookon authored Aug 1, 2023
2 parents c32f607 + e6e7c2c commit fe24bfe
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 82 deletions.
23 changes: 13 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,19 @@ GiphyGif gif = await GiphyGet.getGif(

### Options

| Value | Type | Description | Default |
| ---------------------------- | ------ | --------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `lang` | String | Use [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) language code or use GiphyLanguage constants | `GiphyLanguage.english` |
| `randomID` | String | An ID/proxy for a specific user. | `null` |
| `searchText` | String | Input search hint, we recomend use [flutter_18n package](https://pub.dev/packages/flutter_i18n) for translation | `"Search GIPHY"` |
| `tabColor` | Color | Color for tabs and loading progress, | `Theme.of(context).accentColor` |
| `debounceTimeInMilliseconds` | int | Time to pause between search keystrokes | `350` |
| `showGIFs` | bool | Whether to show the GIFs tab or not | `true` |
| `showStickers` | bool | Whether to show the stickers tab or not | `true` |
| `showEmojis` | bool | Whether to show the emojis tab or not | `true` |
| Value | Type | Description | Default |
|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|
| `lang` | String | Use [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1) language code or use GiphyLanguage constants | `GiphyLanguage.english` |
| `randomID` | String | An ID/proxy for a specific user. | `null` |
| `searchText` | String | Input search hint, we recomend use [flutter_18n package](https://pub.dev/packages/flutter_i18n) for translation | `"Search GIPHY"` |
| `tabColor` | Color | Color for tabs and loading progress, | `Theme.of(context).accentColor` |
| `debounceTimeInMilliseconds` | int | Time to pause between search keystrokes | `350` |
| `showGIFs` | bool | Whether to show the GIFs tab or not | `true` |
| `showStickers` | bool | Whether to show the stickers tab or not | `true` |
| `showEmojis` | bool | Whether to show the emojis tab or not | `true` |
| `tapTopBuilder` | `Widget Function(BuildContext context)` | A custom builder for tab top. Must return a widget that will replace default Giphy-like tab top | `null`. Displays default Giphy-like tab top |
| `tabBottomBuilder` | `Widget Function(BuildContext context)` | A custom builder for tab bottom. Must return a widget that will replace default Giphy credits logo. Note that credits are required to be shown by Giphy | `null`. Displays default Giphy credits logo |
| `searchAppBarBuilder` | `Widget Function(BuildContext context,FocusNode focusNode,bool autofocus,TextEditingController textEditingController,void Function() onClearSearch)` | A custom builder for search app bar. Must return a widget that will replace default Giphy-like search bar input | `null`. Displays default Giphy-like search bar input |

### [Get Random ID](https://developers.giphy.com/docs/api/endpoint#random-id)

Expand Down
4 changes: 2 additions & 2 deletions example/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,10 +116,10 @@ packages:
dependency: transitive
description:
name: flutter_staggered_grid_view
sha256: "1312314293acceb65b92754298754801b0e1f26a1845833b740b30415bbbcf07"
sha256: "19e7abb550c96fbfeb546b23f3ff356ee7c59a019a651f8f102a4ba9b7349395"
url: "https://pub.dev"
source: hosted
version: "0.6.2"
version: "0.7.0"
flutter_test:
dependency: "direct dev"
description: flutter
Expand Down
33 changes: 25 additions & 8 deletions lib/giphy_get.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import 'package:giphy_get/src/client/models/languages.dart';
import 'package:giphy_get/src/client/models/rating.dart';
import 'package:giphy_get/src/providers/app_bar_provider.dart';
import 'package:giphy_get/src/providers/sheet_provider.dart';
import 'package:giphy_get/src/views/main_view.dart';
import 'package:giphy_get/src/providers/tab_provider.dart';
import 'package:giphy_get/src/views/main_view.dart';
import 'package:provider/provider.dart';

// Giphy Client Export
Expand All @@ -19,10 +19,20 @@ export 'package:giphy_get/src/client/models/image.dart';
export 'package:giphy_get/src/client/models/images.dart';
export 'package:giphy_get/src/client/models/languages.dart';
export 'package:giphy_get/src/client/models/rating.dart';
export 'package:giphy_get/src/client/models/user.dart';
export 'package:giphy_get/src/client/models/type.dart';
export 'package:giphy_get/src/widgets/giphy_gif.widget.dart';
export 'package:giphy_get/src/client/models/user.dart';
export 'package:giphy_get/src/widgets/giphy_get.widget.dart';
export 'package:giphy_get/src/widgets/giphy_gif.widget.dart';

typedef TabTopBuilder = Widget Function(BuildContext context);
typedef TabBottomBuilder = Widget Function(BuildContext context);
typedef SearchAppBarBuilder = Widget Function(
BuildContext context,
FocusNode focusNode,
bool autofocus,
TextEditingController textEditingController,
void Function() onClearSearch,
);

class GiphyGet {
// Show Bottom Sheet
Expand All @@ -42,18 +52,22 @@ class GiphyGet {
Color? textSelectedColor,
Color? textUnselectedColor,
int debounceTimeInMilliseconds = 350,
TabTopBuilder? tapTopBuilder,
TabBottomBuilder? tabBottomBuilder,
SearchAppBarBuilder? searchAppBarBuilder,
}) {
if (apiKey == "") {
throw Exception("apiKey must be not null or not empty");
}

return showModalBottomSheet<GiphyGif>(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(10.0),
),
),
shape: Theme.of(context).bottomSheetTheme.shape ??
RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(10.0),
),
),
isScrollControlled: true,
context: context,
builder: (ctx) => MultiProvider(
Expand Down Expand Up @@ -87,6 +101,9 @@ class GiphyGet {
showGIFs: showGIFs,
showStickers: showStickers,
showEmojis: showEmojis,
tabTopBuilder: tapTopBuilder,
tabBottomBuilder: tabBottomBuilder,
searchAppBarBuilder: searchAppBarBuilder,
),
),
),
Expand Down
87 changes: 52 additions & 35 deletions lib/src/views/appbar/searchappbar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import 'dart:math';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:giphy_get/giphy_get.dart';
import 'package:giphy_get/src/client/models/type.dart';
import 'package:giphy_get/src/l10n/l10n.dart';
import 'package:giphy_get/src/providers/app_bar_provider.dart';
import 'package:giphy_get/src/providers/sheet_provider.dart';
Expand All @@ -14,8 +13,13 @@ import 'package:provider/provider.dart';
class SearchAppBar extends StatefulWidget {
// Scroll Controller
final ScrollController scrollController;
final SearchAppBarBuilder? searchAppBarBuilder;

SearchAppBar({Key? key, required this.scrollController}) : super(key: key);
SearchAppBar({
Key? key,
required this.scrollController,
this.searchAppBarBuilder,
}) : super(key: key);

@override
_SearchAppBarState createState() => _SearchAppBarState();
Expand Down Expand Up @@ -102,43 +106,56 @@ class _SearchAppBarState extends State<SearchAppBar> {
children: [
_tabProvider.tabType == GiphyType.emoji
? Container()
: SizedBox(
height: 40,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: TextField(
textAlignVertical: TextAlignVertical.center,
autofocus: _sheetProvider.initialExtent ==
SheetProvider.maxExtent,
focusNode: _focus,
controller: _textEditingController,
decoration: InputDecoration(
isDense: true,
filled: true,
prefixIcon: _searchIcon(),
hintText: l.searchInputLabel,
suffixIcon: IconButton(
icon: Icon(
Icons.clear,
color:
Theme.of(context).textTheme.bodyLarge!.color!,
),
onPressed: () {
setState(() {
_textEditingController.clear();
});
}),
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
: widget.searchAppBarBuilder?.call(
context,
_focus,
_sheetProvider.initialExtent == SheetProvider.maxExtent,
_textEditingController,
() {
setState(() {
_textEditingController.clear();
});
},
) ??
SizedBox(
height: 40,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: TextField(
textAlignVertical: TextAlignVertical.center,
autofocus: _sheetProvider.initialExtent ==
SheetProvider.maxExtent,
focusNode: _focus,
controller: _textEditingController,
decoration: InputDecoration(
isDense: true,
filled: true,
prefixIcon: _searchIcon(),
hintText: l.searchInputLabel,
suffixIcon: IconButton(
icon: Icon(
Icons.clear,
color: Theme.of(context)
.textTheme
.bodyLarge!
.color!,
),
onPressed: () {
setState(() {
_textEditingController.clear();
});
}),
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
),
autocorrect: false,
),
autocorrect: false,
),
),
),
),
],
);
}
Expand Down
12 changes: 10 additions & 2 deletions lib/src/views/main_view.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:giphy_get/giphy_get.dart';
import 'package:giphy_get/src/providers/sheet_provider.dart';
import 'package:giphy_get/src/views/appbar/searchappbar.dart';
import 'package:giphy_get/src/views/tab/giphy_tab_bar.dart';
Expand All @@ -13,11 +14,17 @@ class MainView extends StatefulWidget {
this.showEmojis = true,
this.showGIFs = true,
this.showStickers = true,
this.tabTopBuilder,
this.tabBottomBuilder,
this.searchAppBarBuilder,
}) : super(key: key);

final bool showGIFs;
final bool showStickers;
final bool showEmojis;
final TabTopBuilder? tabTopBuilder;
final TabBottomBuilder? tabBottomBuilder;
final SearchAppBarBuilder? searchAppBarBuilder;

@override
_MainViewState createState() => _MainViewState();
Expand Down Expand Up @@ -80,7 +87,7 @@ class _MainViewState extends State<MainView>
Widget _bottomSheetBody() => Column(
mainAxisSize: MainAxisSize.min,
children: [
GiphyTabTop(),
widget.tabTopBuilder?.call(context) ?? GiphyTabTop(),
GiphyTabBar(
tabController: _tabController,
showGIFs: widget.showGIFs,
Expand All @@ -89,6 +96,7 @@ class _MainViewState extends State<MainView>
),
SearchAppBar(
scrollController: this._scrollController,
searchAppBarBuilder: widget.searchAppBarBuilder,
),
Expanded(
child: GiphyTabView(
Expand All @@ -99,7 +107,7 @@ class _MainViewState extends State<MainView>
showEmojis: widget.showEmojis,
),
),
GiphyTabBottom()
widget.tabBottomBuilder?.call(context) ?? GiphyTabBottom(),
],
);
}
28 changes: 13 additions & 15 deletions lib/src/views/tab/giphy_tab_detail.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,21 +122,18 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
);
}

return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
// child: StaggeredGrid.countB
child: MasonryGridView.count(
scrollDirection: _scrollDirection,
controller: widget.scrollController,
itemCount: _list.length,
crossAxisCount: _crossAxisCount,
mainAxisSpacing: _spacing,
crossAxisSpacing: _spacing,
itemBuilder: (ctx, idx) {
GiphyGif _gif = _list[idx];
return _item(_gif);
},
),
return MasonryGridView.count(
padding: EdgeInsets.symmetric(horizontal: 8.0),
scrollDirection: _scrollDirection,
controller: widget.scrollController,
itemCount: _list.length,
crossAxisCount: _crossAxisCount,
mainAxisSpacing: _spacing,
crossAxisSpacing: _spacing,
itemBuilder: (ctx, idx) {
GiphyGif _gif = _list[idx];
return _item(_gif);
},
);
}

Expand All @@ -152,6 +149,7 @@ class _GiphyTabDetailState extends State<GiphyTabDetail> {
? Container()
: ExtendedImage.network(
gif.images!.fixedWidth.webp!,
semanticLabel: gif.title,
cache: true,
gaplessPlayback: true,
fit: BoxFit.fill,
Expand Down
4 changes: 2 additions & 2 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,10 +188,10 @@ packages:
dependency: "direct main"
description:
name: flutter_staggered_grid_view
sha256: "1312314293acceb65b92754298754801b0e1f26a1845833b740b30415bbbcf07"
sha256: "19e7abb550c96fbfeb546b23f3ff356ee7c59a019a651f8f102a4ba9b7349395"
url: "https://pub.dev"
source: hosted
version: "0.6.2"
version: "0.7.0"
flutter_test:
dependency: "direct dev"
description: flutter
Expand Down
16 changes: 8 additions & 8 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ dependencies:
flutter_localizations:
sdk: flutter

provider: ^6.0.3
extended_image: ^8.0.0
flutter_staggered_grid_view: ^0.6.0
meta: ^1.7.0
provider: ^6.0.5
extended_image: ^8.0.2
flutter_staggered_grid_view: ^0.7.0
meta: ^1.9.1
http: ^1.1.0
url_launcher: ^6.1.3
url_launcher: ^6.1.12

dev_dependencies:
flutter_test:
sdk: flutter
integration_test:
sdk: flutter
mockito: ^5.0.7
pedantic: ^1.11.0
matcher: ^0.12.10
mockito: ^5.4.2
pedantic: ^1.11.1
matcher: ^0.12.15

flutter:
assets:
Expand Down

0 comments on commit fe24bfe

Please sign in to comment.