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,
),
RoundedWhiteContainer(
padding: const EdgeInsets.all(0),
child: RawMaterialButton(
// splashColor: Theme.of(context).extension<StackColors>()!.highlight,
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(
child: Column(
children: [
Row(
children: [
Column(
crossAxisAlignment:
@ -127,10 +115,20 @@ class AppearanceSettingsView extends ConsumerWidget {
style: STextStyles.titleBold12(context),
textAlign: TextAlign.left,
),
const SizedBox(
height: 12,
),
const Padding(
padding: EdgeInsets.all(10),
padding: EdgeInsets.all(4),
child: ThemeOptionsWidget(),
),
],
),
],
),
const SizedBox(
height: 12,
),
SecondaryButton(
label: "Add more themes",
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/custom_buttons/app_bar_icon_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_white_container.dart';
@ -23,8 +24,7 @@ class _ManageThemesViewState extends State<ManageThemesView> {
return ConditionalParent(
condition: !Util.isDesktop,
builder: (child) => Scaffold(
backgroundColor:
Theme.of(context).extension<StackColors>()!.background,
backgroundColor: Theme.of(context).extension<StackColors>()!.background,
appBar: AppBar(
leading: AppBarBackButton(
onPressed: () {
@ -32,39 +32,50 @@ class _ManageThemesViewState extends State<ManageThemesView> {
},
),
title: Text(
"Settings",
"Add more themes",
style: STextStyles.navBarTitle(context),
),
),
body: LayoutBuilder(
builder: (builderContext, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
child: IntrinsicHeight(
child: child,
),
),
);
},
)),
),
child: Column(
children: [
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100,
const SizedBox(
height: 16,
),
GridView.builder(
shrinkWrap: true,
primary: false,
itemCount: 100,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 2 / 2.7,
),
itemBuilder: (_, index) {
return Container(
width: 25,
height: 25,
color: Colors.red,
return StackThemeCard(
name: index.toString(),
size: "lol GB",
);
},
),
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 {
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
State<StackThemeCard> createState() => _StackThemeCardState();
@ -87,19 +105,34 @@ class _StackThemeCardState extends State<StackThemeCard> {
return RoundedWhiteContainer(
child: Column(
children: [
RoundedContainer(
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 18,
),
child: AspectRatio(
aspectRatio: 1,
child: RoundedContainer(
color: Colors.grey,
radiusMultiplier: 100,
),
Text(
"Theme name",
),
),
const SizedBox(
height: 12,
),
Text(
"10.6 GB (lol)",
widget.name,
),
const SizedBox(
height: 6,
),
Text(
widget.size,
),
const Spacer(),
PrimaryButton(
label: buttonLabel,
buttonHeight: ButtonHeight.m,
buttonHeight: ButtonHeight.l,
onPressed: () {},
),
],