mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-12-23 11:59:30 +00:00
manage themes ui basic grid layout
This commit is contained in:
parent
80f341ac40
commit
6df6207edd
2 changed files with 97 additions and 70 deletions
|
@ -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 {
|
|||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
|
|
@ -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: () {},
|
||||
),
|
||||
],
|
||||
|
|
Loading…
Reference in a new issue