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,
|
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 {
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
|
@ -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: () {},
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in a new issue