simple auth dialog ui

This commit is contained in:
DASHU
2024-08-25 01:23:51 +08:00
parent b6e8f5e55d
commit 54eac18be1
4 changed files with 290 additions and 1 deletions

View File

@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';
import 'package:nowser/const/base.dart';
class AuthAppInfoComponent extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _AuthAppInfoComponent();
}
}
class _AuthAppInfoComponent extends State<AuthAppInfoComponent> {
@override
Widget build(BuildContext context) {
var themeData = Theme.of(context);
return Stack(
alignment: Alignment.center,
children: [
Container(
width: double.infinity,
height: 64,
child: Card(
child: Container(
padding: EdgeInsets.all(Base.BASE_PADDING_HALF),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(right: Base.BASE_PADDING_HALF),
child: Icon(
Icons.image,
size: 46,
),
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"APP NAME",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text("This is App info des"),
],
)
],
),
),
),
),
Positioned(
right: 16,
child: Container(
decoration: BoxDecoration(
color: themeData.hintColor.withOpacity(0.3),
borderRadius: BorderRadius.circular(8),
),
padding: EdgeInsets.only(
left: Base.BASE_PADDING_HALF,
right: Base.BASE_PADDING_HALF,
top: 4,
bottom: 4,
),
child: Text(
"WEB",
style: TextStyle(
fontSize: themeData.textTheme.bodySmall!.fontSize,
color: themeData.hintColor,
),
),
),
)
],
);
}
}

View File

@@ -0,0 +1,193 @@
import 'package:flutter/material.dart';
import 'package:nowser/const/base.dart';
import '../logo_component.dart';
import 'auth_app_info_component.dart';
class AuthDialog extends StatefulWidget {
static void show(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AuthDialog();
},
);
}
@override
State<StatefulWidget> createState() {
return _AuthDialog();
}
}
class _AuthDialog extends State<AuthDialog> {
bool showDetail = false;
@override
Widget build(BuildContext context) {
var themeData = Theme.of(context);
var baseMargin = EdgeInsets.only(
top: Base.BASE_PADDING_HALF,
bottom: Base.BASE_PADDING_HALF,
);
var hintColor = themeData.hintColor;
List<Widget> list = [];
var topWidget = Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(
left: Base.BASE_PADDING,
right: Base.BASE_PADDING,
top: Base.BASE_PADDING_HALF,
bottom: Base.BASE_PADDING_HALF,
),
child: LogoComponent(),
),
Expanded(
child: Container(
margin: EdgeInsets.only(right: Base.BASE_PADDING_HALF),
alignment: Alignment.centerRight,
child: DropdownButton<String>(
items: [
DropdownMenuItem(
child: Text("npubxxxxxx"),
value: "npubxxxxxx",
)
],
onChanged: (Object? value) {},
value: "npubxxxxxx",
),
),
),
],
),
);
list.add(Container(
alignment: Alignment.center,
margin: baseMargin,
child: Text(
"Action Title",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: themeData.textTheme.bodyLarge!.fontSize,
),
),
));
list.add(Container(
margin: baseMargin,
child: AuthAppInfoComponent(),
));
list.add(Container(
margin: baseMargin,
child: Text(
"Allow web.nostrmo.com to sign a authenticate event",
),
));
var showDetailWidget = GestureDetector(
onTap: () {
setState(() {
showDetail = !showDetail;
});
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("detail"),
showDetail ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
],
),
);
List<Widget> detailList = [];
if (showDetail) {
detailList.add(Container(
height: 210,
width: double.infinity,
padding: EdgeInsets.all(Base.BASE_PADDING_HALF),
decoration: BoxDecoration(
color: hintColor.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
child: SingleChildScrollView(
child: Text(
"GoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGood"),
),
));
} else {}
detailList.add(Container(
margin: baseMargin,
child: showDetailWidget,
));
list.add(Container(
height: 250,
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: detailList,
),
));
list.add(Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// FilledButton(onPressed: () {}, child: Text("Cancel")),
// OutlinedButton(
// onPressed: () {},
// child: Text(
// "Cancel",
// style: TextStyle(
// color: Colors.red,
// ),
// ),
// style: ,
// ),
FilledButton(
onPressed: () {},
child: Text("Cancel"),
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Colors.red),
),
),
Container(
margin: EdgeInsets.only(
left: Base.BASE_PADDING_HALF,
),
child: FilledButton(onPressed: () {}, child: Text("Confirm")),
)
],
),
));
return Dialog(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(Base.BASE_PADDING),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: hintColor.withOpacity(0.3)))),
child: topWidget,
),
Container(
padding: EdgeInsets.all(Base.BASE_PADDING),
child: Column(
mainAxisSize: MainAxisSize.min,
children: list,
),
),
],
),
);
}
}

View File

@@ -0,0 +1,17 @@
import 'package:flutter/material.dart';
class LogoComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// this should be change to a logo image
width: 40,
height: 40,
color: Colors.red,
child: Icon(
Icons.image,
size: 40,
),
);
}
}

View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:nowser/component/auth_dialog/auth_dialog.dart';
import 'package:nowser/component/webview/web_info.dart';
import 'package:nowser/const/base.dart';
import 'package:nowser/main.dart';
@@ -61,7 +62,9 @@ class _WebHomeComponent extends State<WebHomeComponent> {
RouterUtil.router(context, RouterPath.WEB_TABS);
}),
wrapBottomBtn(const Icon(Icons.space_dashboard)),
wrapBottomBtn(const Icon(Icons.segment)),
wrapBottomBtn(const Icon(Icons.segment), onTap: () {
AuthDialog.show(context);
}),
],
),
),