manage themes ui basic grid layout

This commit is contained in:
julian 2023-04-27 17:42:59 -06:00
parent 80f341ac40
commit 6df6207edd
2 changed files with 97 additions and 70 deletions

View file

@ -102,21 +102,9 @@ class AppearanceSettingsView extends ConsumerWidget {
height: 10, height: 10,
), ),
RoundedWhiteContainer( RoundedWhiteContainer(
padding: const EdgeInsets.all(0), child: Column(
child: RawMaterialButton( children: [
// splashColor: Theme.of(context).extension<StackColors>()!.highlight, Row(
padding: const EdgeInsets.all(0),
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
onPressed: null,
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
children: [ children: [
Column( Column(
crossAxisAlignment: crossAxisAlignment:
@ -127,10 +115,20 @@ class AppearanceSettingsView extends ConsumerWidget {
style: STextStyles.titleBold12(context), style: STextStyles.titleBold12(context),
textAlign: TextAlign.left, textAlign: TextAlign.left,
), ),
const SizedBox(
height: 12,
),
const Padding( const Padding(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(4),
child: ThemeOptionsWidget(), child: ThemeOptionsWidget(),
), ),
],
),
],
),
const SizedBox(
height: 12,
),
SecondaryButton( SecondaryButton(
label: "Add more themes", label: "Add more themes",
onPressed: () { onPressed: () {
@ -141,10 +139,6 @@ class AppearanceSettingsView extends ConsumerWidget {
) )
], ],
), ),
],
),
),
),
), ),
], ],
), ),

View file

@ -5,6 +5,7 @@ import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart'; import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_container.dart'; import 'package:stackwallet/widgets/rounded_container.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
@ -23,8 +24,7 @@ class _ManageThemesViewState extends State<ManageThemesView> {
return ConditionalParent( return ConditionalParent(
condition: !Util.isDesktop, condition: !Util.isDesktop,
builder: (child) => Scaffold( builder: (child) => Scaffold(
backgroundColor: backgroundColor: Theme.of(context).extension<StackColors>()!.background,
Theme.of(context).extension<StackColors>()!.background,
appBar: AppBar( appBar: AppBar(
leading: AppBarBackButton( leading: AppBarBackButton(
onPressed: () { onPressed: () {
@ -32,39 +32,50 @@ class _ManageThemesViewState extends State<ManageThemesView> {
}, },
), ),
title: Text( title: Text(
"Settings", "Add more themes",
style: STextStyles.navBarTitle(context), style: STextStyles.navBarTitle(context),
), ),
), ),
body: LayoutBuilder( body: SingleChildScrollView(
builder: (builderContext, constraints) { child: Padding(
return SingleChildScrollView( padding: const EdgeInsets.symmetric(
child: ConstrainedBox( horizontal: 16,
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
), ),
child: IntrinsicHeight(
child: child, child: child,
), ),
), ),
); ),
},
)),
child: Column( child: Column(
children: [ children: [
Expanded( const SizedBox(
child: GridView.builder( height: 16,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( ),
maxCrossAxisExtent: 100, GridView.builder(
shrinkWrap: true,
primary: false,
itemCount: 100,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 2 / 2.7,
), ),
itemBuilder: (_, index) { itemBuilder: (_, index) {
return Container( return StackThemeCard(
width: 25, name: index.toString(),
height: 25, size: "lol GB",
color: Colors.red,
); );
}, },
), ),
const SizedBox(
height: 28,
),
SecondaryButton(
label: "Install theme file",
onPressed: () {},
),
const SizedBox(
height: 16,
), ),
], ],
), ),
@ -73,7 +84,14 @@ class _ManageThemesViewState extends State<ManageThemesView> {
} }
class StackThemeCard extends StatefulWidget { class StackThemeCard extends StatefulWidget {
const StackThemeCard({Key? key}) : super(key: key); const StackThemeCard({
Key? key,
required this.name,
required this.size,
}) : super(key: key);
final String name;
final String size;
@override @override
State<StackThemeCard> createState() => _StackThemeCardState(); State<StackThemeCard> createState() => _StackThemeCardState();
@ -87,19 +105,34 @@ class _StackThemeCardState extends State<StackThemeCard> {
return RoundedWhiteContainer( return RoundedWhiteContainer(
child: Column( child: Column(
children: [ children: [
RoundedContainer( const Padding(
padding: EdgeInsets.symmetric(
horizontal: 18,
),
child: AspectRatio(
aspectRatio: 1,
child: RoundedContainer(
color: Colors.grey, color: Colors.grey,
radiusMultiplier: 100, radiusMultiplier: 100,
), ),
Text( ),
"Theme name", ),
const SizedBox(
height: 12,
), ),
Text( Text(
"10.6 GB (lol)", widget.name,
), ),
const SizedBox(
height: 6,
),
Text(
widget.size,
),
const Spacer(),
PrimaryButton( PrimaryButton(
label: buttonLabel, label: buttonLabel,
buttonHeight: ButtonHeight.m, buttonHeight: ButtonHeight.l,
onPressed: () {}, onPressed: () {},
), ),
], ],