feat: CustomScrollView in app and patches selector views (#208)

This commit is contained in:
Unknown 2022-09-19 13:57:40 +02:00 committed by GitHub
parent 9bdccb3c9d
commit 2b7287c04c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 190 additions and 169 deletions

View File

@ -66,11 +66,13 @@
"widgetSubtitle": "We are online!" "widgetSubtitle": "We are online!"
}, },
"appSelectorView": { "appSelectorView": {
"viewTitle": "Select application",
"searchBarHint": "Search applications", "searchBarHint": "Search applications",
"storageButton": "Storage", "storageButton": "Storage",
"errorMessage": "Unable to use selected application." "errorMessage": "Unable to use selected application."
}, },
"patchesSelectorView": { "patchesSelectorView": {
"viewTitle": "Select patches",
"searchBarHint": "Search patches", "searchBarHint": "Search patches",
"doneButton": "Done", "doneButton": "Done",
"noPatchesFound": "No patches found for the selected app." "noPatchesFound": "No patches found for the selected app."

View File

@ -31,53 +31,62 @@ class _AppSelectorViewState extends State<AppSelectorView> {
Navigator.of(context).pop(); Navigator.of(context).pop();
}, },
), ),
body: SafeArea( body: CustomScrollView(
child: Padding( slivers: [
padding: SliverAppBar(
const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0), pinned: true,
child: Column( floating: true,
children: <Widget>[ snap: false,
SearchBar( title: I18nText('appSelectorView.viewTitle'),
showSelectIcon: false, bottom: PreferredSize(
hintText: FlutterI18n.translate( preferredSize: const Size.fromHeight(64.0),
context, child: Padding(
'appSelectorView.searchBarHint', padding: const EdgeInsets.symmetric(
vertical: 8.0, horizontal: 12.0),
child: SearchBar(
showSelectIcon: false,
hintText: FlutterI18n.translate(
context,
'appSelectorView.searchBarHint',
),
onQueryChanged: (searchQuery) {
setState(() {
_query = searchQuery;
});
},
), ),
onQueryChanged: (searchQuery) {
setState(() {
_query = searchQuery;
});
},
), ),
const SizedBox(height: 12), ),
Expanded(
child: model.noApps
? Center(
child: I18nText('appSelectorCard.noAppsLabel'),
)
: model.apps.isEmpty
? const AppSkeletonLoader()
: ListView(
padding: const EdgeInsets.only(bottom: 80),
children: model
.getFilteredApps(_query)
.map((app) => InkWell(
onTap: () {
model.selectApp(app);
Navigator.of(context).pop();
},
child: InstalledAppItem(
name: app.appName,
pkgName: app.packageName,
icon: app.icon,
),
))
.toList(),
),
),
],
), ),
), SliverToBoxAdapter(
child: model.noApps
? Center(
child: I18nText('appSelectorCard.noAppsLabel'),
)
: model.apps.isEmpty
? const AppSkeletonLoader()
: Padding(
padding: const EdgeInsets.only(bottom: 80).add(
const EdgeInsets.symmetric(horizontal: 12.0)),
child: Column(
children: model
.getFilteredApps(_query)
.map((app) => InkWell(
onTap: () {
model.selectApp(app);
Navigator.of(context).pop();
},
child: InstalledAppItem(
name: app.appName,
pkgName: app.packageName,
icon: app.icon,
),
))
.toList(),
),
),
),
],
), ),
), ),
); );

View File

@ -33,144 +33,153 @@ class _PatchesSelectorViewState extends State<PatchesSelectorView> {
}, },
), ),
), ),
body: SafeArea( body: CustomScrollView(
child: Padding( slivers: [
padding: SliverAppBar(
const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0), pinned: true,
child: Column( floating: true,
children: <Widget>[ snap: false,
SearchBar( title: I18nText('patchesSelectorView.viewTitle'),
showSelectIcon: true, bottom: PreferredSize(
hintText: FlutterI18n.translate( preferredSize: const Size.fromHeight(64.0),
context, child: Padding(
'patchesSelectorView.searchBarHint', padding: const EdgeInsets.symmetric(
vertical: 8.0, horizontal: 12.0),
child: SearchBar(
showSelectIcon: true,
hintText: FlutterI18n.translate(
context,
'patchesSelectorView.searchBarHint',
),
onQueryChanged: (searchQuery) {
setState(() {
_query = searchQuery;
});
},
onSelectAll: (value) => model.selectAllPatches(value),
), ),
onQueryChanged: (searchQuery) {
setState(() {
_query = searchQuery;
});
},
onSelectAll: (value) => model.selectAllPatches(value),
), ),
const SizedBox(height: 12), ),
Expanded( ),
child: model.patches.isEmpty SliverToBoxAdapter(
? Padding( child: model.patches.isEmpty
padding: const EdgeInsets.all(8.0), ? Padding(
child: Center( padding: const EdgeInsets.all(8.0),
child: I18nText( child: Center(
'patchesSelectorView.noPatchesFound', child: I18nText(
child: Text( 'patchesSelectorView.noPatchesFound',
'', child: Text(
style: Theme.of(context).textTheme.bodyMedium, '',
), style: Theme.of(context).textTheme.bodyMedium,
),
), ),
) ),
: ListView( ),
padding: const EdgeInsets.only(bottom: 80), )
children: model : Padding(
.getQueriedPatches(_query) padding: const EdgeInsets.only(bottom: 80)
.map( .add(const EdgeInsets.symmetric(horizontal: 12.0)),
(patch) => PatchItem( child: Column(
name: patch.name, children: model
simpleName: patch.getSimpleName(), .getQueriedPatches(_query)
version: patch.version, .map(
description: patch.description, (patch) => PatchItem(
packageVersion: model.getAppVersion(), name: patch.name,
supportedPackageVersions: simpleName: patch.getSimpleName(),
model.getSupportedVersions(patch), version: patch.version,
isUnsupported: !model.isPatchSupported(patch), description: patch.description,
isSelected: model.isSelected(patch), packageVersion: model.getAppVersion(),
onChanged: (value) => supportedPackageVersions:
model.selectPatch(patch, value), model.getSupportedVersions(patch),
), isUnsupported: !model.isPatchSupported(patch),
/* TODO: Enable this and make use of new Patch Options implementation isSelected: model.isSelected(patch),
patch.hasOptions ? ExpandablePanel( onChanged: (value) =>
controller: expController, model.selectPatch(patch, value),
theme: const ExpandableThemeData( ),
hasIcon: false, /* TODO: Enable this and make use of new Patch Options implementation
tapBodyToExpand: true, patch.hasOptions ? ExpandablePanel(
tapBodyToCollapse: true, controller: expController,
tapHeaderToExpand: true, theme: const ExpandableThemeData(
), hasIcon: false,
header: Column( tapBodyToExpand: true,
children: <Widget>[ tapBodyToCollapse: true,
GestureDetector( tapHeaderToExpand: true,
onLongPress: () => ),
expController.toggle(), header: Column(
child: PatchItem( children: <Widget>[
name: patch.name, GestureDetector(
simpleName: patch.getSimpleName(), onLongPress: () =>
description: patch.description, expController.toggle(),
version: patch.version, child: PatchItem(
packageVersion: name: patch.name,
model.getAppVersion(), simpleName: patch.getSimpleName(),
supportedPackageVersions: model description: patch.description,
.getSupportedVersions(patch), version: patch.version,
isUnsupported: !model packageVersion:
.isPatchSupported(patch), model.getAppVersion(),
isSelected: supportedPackageVersions: model
model.isSelected(patch), .getSupportedVersions(patch),
onChanged: (value) => model isUnsupported: !model
.selectPatch(patch, value), .isPatchSupported(patch),
child: const Padding( isSelected:
padding: EdgeInsets.symmetric( model.isSelected(patch),
vertical: 8.0, onChanged: (value) => model
), .selectPatch(patch, value),
child: Text( child: const Padding(
'Long press for additional options.', padding: EdgeInsets.symmetric(
), vertical: 8.0,
),
child: Text(
'Long press for additional options.',
), ),
), ),
), ),
], ),
],
),
expanded: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 10,
), ),
expanded: Padding( child: Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
vertical: 10.0, vertical: 8,
horizontal: 10, horizontal: 8,
), ),
child: Container( decoration: BoxDecoration(
padding: const EdgeInsets.symmetric( color: Theme.of(context)
vertical: 8, .colorScheme
horizontal: 8, .tertiary
), .withOpacity(0.1),
decoration: BoxDecoration( borderRadius:
color: Theme.of(context) BorderRadius.circular(12),
.colorScheme ),
.tertiary child: Column(
.withOpacity(0.1), children: <Widget>[
borderRadius: Text(
BorderRadius.circular(12), 'Patch options',
), style: GoogleFonts.inter(
child: Column( fontSize: 18,
children: <Widget>[ fontWeight: FontWeight.w600,
Text(
'Patch options',
style: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w600,
),
), ),
const OptionsTextField( ),
hint: 'App name'), const OptionsTextField(
const OptionsFilePicker( hint: 'App name'),
optionName: 'Choose a logo', const OptionsFilePicker(
), optionName: 'Choose a logo',
], ),
), ],
), ),
), ),
collapsed: Container(), ),
) */ collapsed: Container(),
) ) */
.toList(), )
), .toList(),
), ),
], ),
), ),
), ],
), ),
), ),
); );

View File

@ -10,6 +10,7 @@ class AppSkeletonLoader extends StatelessWidget {
return Skeleton( return Skeleton(
isLoading: true, isLoading: true,
skeleton: ListView.builder( skeleton: ListView.builder(
shrinkWrap: true,
itemCount: 7, itemCount: 7,
itemBuilder: (context, index) => Padding( itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8.0), padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8.0),