OnePoem / OnePoem-App

Go to a project
Toggle navigation Toggle navigation pinning
reason
24471029 1 parent c79f8cc4

update styles

Inline Side-by-side
Showing 4 changed files with 141 additions and 103 deletions
import 'package:flutter/material.dart';
import 'package:one_poem/tiktok/style/style.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:tapped/tapped.dart';
import 'package:flutter_gen/gen_l10n/one_poem_localizations.dart';
import 'package:one_poem/extension/int_extension.dart';
class AccountPage extends StatefulWidget {
const AccountPage({
Key? key,
......@@ -26,12 +27,17 @@ class _AccountPageState extends State<AccountPage> {
@override
Widget build(BuildContext context) {
Widget likeButton = Container(
color: ColorPlate.back1,
color: ColorPlate.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: const <Widget>[
Tapped(
child: _MembershipButton(
title: '会员中心',
),
),
Tapped(
child: _UserRightButton(
title: '钱包',
),
......@@ -40,23 +46,23 @@ class _AccountPageState extends State<AccountPage> {
),
);
Widget avatar = Container(
height: 120 + MediaQuery.of(context).padding.top,
padding: const EdgeInsets.only(left: 18),
height: 120.px + MediaQuery.of(context).padding.top,
padding: EdgeInsets.only(left: 18.px),
alignment: Alignment.bottomLeft,
child: OverflowBox(
alignment: Alignment.bottomLeft,
minHeight: 20,
maxHeight: 300,
minHeight: 20.px,
maxHeight: 300.px,
child: Container(
height: 74,
width: 74,
margin: const EdgeInsets.only(bottom: 12),
height: 74.px,
width: 74.px,
margin: EdgeInsets.only(bottom: 12.px),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(44),
borderRadius: BorderRadius.circular(44.px),
color: Colors.orange,
border: Border.all(
color: Colors.white,
width: 1,
width: 1.px,
),
),
child: ClipOval(
......@@ -73,19 +79,19 @@ class _AccountPageState extends State<AccountPage> {
parent: AlwaysScrollableScrollPhysics(),
),
children: <Widget>[
Container(height: 20),
Container(height: 20.px),
// 头像与关注
Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[likeButton, avatar],
),
Container(
color: ColorPlate.back1,
color: ColorPlate.white,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(left: 18),
color: ColorPlate.back1,
padding: EdgeInsets.only(left: 18.px),
color: ColorPlate.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
......@@ -93,14 +99,14 @@ class _AccountPageState extends State<AccountPage> {
'@唐宋八大家TOP8',
style: StandardTextStyle.big,
),
Container(height: 8),
Container(height: 8.px),
Text(
'朴实无华，且枯燥',
style: StandardTextStyle.smallWithOpacity.apply(
color: Colors.white,
style: StandardTextStyle.small.apply(
color: Colors.black45,
),
),
Container(height: 10),
Container(height: 10.px),
Row(
children: const <Widget>[
_UserTag(tag: '幽默'),
......@@ -109,15 +115,15 @@ class _AccountPageState extends State<AccountPage> {
_UserTag(tag: '狮子座'),
],
),
Container(height: 10),
Container(height: 10.px),
],
),
),
Container(
color: ColorPlate.back1,
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
color: ColorPlate.white,
padding: EdgeInsets.symmetric(
horizontal: 8.px,
vertical: 2.px,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
......@@ -130,7 +136,7 @@ class _AccountPageState extends State<AccountPage> {
),
),
Container(
height: 10,
height: 10.px,
margin: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
border: Border(
......@@ -147,31 +153,62 @@ class _AccountPageState extends State<AccountPage> {
],
);
return Scaffold(
appBar: MyAppBar(
),
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: <Color>[
Colors.orange,
Colors.red,
],
),
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/poem/poem_background.png"),
fit: BoxFit.fill,
),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 400),
height: double.infinity,
width: double.infinity,
color: ColorPlate.back1,
),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
height: 64.px,
width: double.infinity,
child: IconButton(
icon: const Icon(
Icons.settings_outlined,
color: Colors.black54,
),
onPressed: () {},
),
body,
],
),
));
),
body,
],
),
),
);
}
}
class _MembershipButton extends StatelessWidget {
const _MembershipButton({
Key? key,
required this.title,
}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(
vertical: 3.px,
horizontal: 12.px,
),
margin: EdgeInsets.all(8.px),
alignment: Alignment.center,
child: Text(
title,
style: TextStyle(color: ColorPlate.red.withOpacity(0.4)),
),
decoration: BoxDecoration(
border: Border.all(color: ColorPlate.red.withOpacity(.4)),
borderRadius: BorderRadius.circular(4.px),
),
);
}
}
......@@ -186,11 +223,11 @@ class _UserRightButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
vertical: 6,
horizontal: 20,
padding: EdgeInsets.symmetric(
vertical: 3.px,
horizontal: 12.px,
),
margin: const EdgeInsets.all(8),
margin: EdgeInsets.all(8.px),
alignment: Alignment.center,
child: Text(
title,
......@@ -198,7 +235,7 @@ class _UserRightButton extends StatelessWidget {
),
decoration: BoxDecoration(
border: Border.all(color: ColorPlate.orange),
borderRadius: BorderRadius.circular(4),
borderRadius: BorderRadius.circular(4.px),
),
);
}
......@@ -214,20 +251,20 @@ class _UserTag extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.symmetric(
vertical: 2,
horizontal: 4,
margin: EdgeInsets.symmetric(horizontal: 4.px),
padding: EdgeInsets.symmetric(
vertical: 2.px,
horizontal: 4.px,
),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white.withOpacity(0.3),
color: Colors.black.withOpacity(0.3),
),
borderRadius: BorderRadius.circular(4),
borderRadius: BorderRadius.circular(4.px),
),
child: Text(
tag ?? '标签',
style: StandardTextStyle.smallWithOpacity,
style: StandardTextStyle.small,
),
);
}
......@@ -243,9 +280,9 @@ class _UserVideoTable extends StatelessWidget {
return Column(
children: <Widget>[
Container(
color: ColorPlate.back1,
padding: const EdgeInsets.symmetric(
vertical: 12,
color: ColorPlate.white,
padding: EdgeInsets.symmetric(
vertical: 12.px,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
......@@ -281,6 +318,13 @@ class _UserVideoTable extends StatelessWidget {
_SmallVideo(),
],
),
Row(
children: const <Widget>[
_SmallVideo(),
_SmallVideo(),
_SmallVideo(),
],
),
],
);
}
......@@ -295,18 +339,20 @@ class _SmallVideo extends StatelessWidget {
Widget build(BuildContext context) {
return Expanded(
child: AspectRatio(
aspectRatio: 3 / 4.0,
aspectRatio: 3.px / 4.0,
child: Container(
decoration: BoxDecoration(
color: ColorPlate.darkGray,
border: Border.all(color: Colors.black),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/poem/poem_background.png"),
fit: BoxFit.fill,
),
),
alignment: Alignment.center,
child: Text(
'一言',
style: TextStyle(
color: Colors.white.withOpacity(0.1),
fontSize: 18,
color: Colors.black54,
fontSize: 18.px,
fontWeight: FontWeight.w900,
),
),
......@@ -335,8 +381,8 @@ class _PointSelectTextButton extends StatelessWidget {
children: <Widget>[
isSelect
? Container(
width: 6,
height: 6,
width: 6.px,
height: 6.px,
decoration: BoxDecoration(
color: ColorPlate.orange,
borderRadius: BorderRadius.circular(3),
......@@ -347,9 +393,7 @@ class _PointSelectTextButton extends StatelessWidget {
padding: const EdgeInsets.only(left: 2),
child: Text(
title,
style: isSelect
? StandardTextStyle.small
: StandardTextStyle.smallWithOpacity,
style: isSelect ? StandardTextStyle.big : StandardTextStyle.small,
),
)
],
......@@ -372,7 +416,7 @@ class TextGroup extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
padding: EdgeInsets.symmetric(vertical: 0.px, horizontal: 8.px),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
......@@ -380,10 +424,10 @@ class TextGroup extends StatelessWidget {
title,
style: StandardTextStyle.big.apply(color: color),
),
Container(width: 4),
Container(width: 4.px),
Text(
tag,
style: StandardTextStyle.smallWithOpacity.apply(
style: StandardTextStyle.small.apply(
color: color?.withOpacity(0.6),
),
),
......
import 'package:flutter/material.dart';
import 'package:one_poem/category/provider/categories_page_provider.dart';
import 'package:one_poem/util/theme_utils.dart';
import 'package:one_poem/widgets/load_image.dart';
import 'package:one_poem/widgets/my_app_bar.dart';
import 'package:provider/provider.dart';
import 'category_list_page.dart';
/// design/4商品/index.html
class CategoriesPage extends StatefulWidget {
const CategoriesPage({Key? key}) : super(key: key);
......@@ -45,18 +43,19 @@ class _CategoriesPageState extends State<CategoriesPage>
child: Scaffold(
appBar: MyAppBar(
isBack: false,
isTransparent: true,
homeMenuHeader: Container(
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
child: const Text(
"众妙",
style: TextStyle(color: Colors.white),
style: TextStyle(color: Colors.black54),
),
),
homeActionWidgets: IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
color: Colors.black54,
),
onPressed: () {},
),
......
......@@ -3,11 +3,7 @@ import 'package:flutter/rendering.dart';
class SysSize {
static const double avatar = 56;
// static const double iconBig = 40;
static const double iconNormal = 24;
// static const double big = 18;
// static const double normal = 16;
// static const double small = 12;
static const double iconBig = 40;
static const double big = 16;
static const double normal = 14;
......@@ -36,19 +32,19 @@ class StandardTextStyle {
fontSize: SysSize.normal,
inherit: true,
);
static const TextStyle normalWithOpacity = const TextStyle(
color: const Color.fromRGBO(0xff, 0xff, 0xff, .66),
static const TextStyle normalWithOpacity = TextStyle(
color: Color.fromRGBO(0xff, 0xff, 0xff, .66),
fontWeight: FontWeight.normal,
fontSize: SysSize.normal,
inherit: true,
);
static const TextStyle small = const TextStyle(
static const TextStyle small = TextStyle(
fontWeight: FontWeight.normal,
fontSize: SysSize.small,
inherit: true,
);
static const TextStyle smallWithOpacity = const TextStyle(
color: const Color.fromRGBO(0xff, 0xff, 0xff, .66),
static const TextStyle smallWithOpacity = TextStyle(
color: Color.fromRGBO(0xff, 0xff, 0xff, .66),
fontWeight: FontWeight.normal,
fontSize: SysSize.small,
inherit: true,
......@@ -57,20 +53,20 @@ class StandardTextStyle {
class ColorPlate {
// 配色
static const Color orange = const Color(0xffFFC459);
static const Color yellow = const Color(0xffF1E300);
static const Color green = const Color(0xff7ED321);
static const Color red = const Color(0xffEB3838);
static const Color darkGray = const Color(0xff4A4A4A);
static const Color gray = const Color(0xff9b9b9b);
static const Color lightGray = const Color(0xfff5f5f4);
static const Color black = const Color(0xff000000);
static const Color white = const Color(0xffffffff);
static const Color clear = const Color(0);
static const Color orange = Color(0xffFFC459);
static const Color yellow = Color(0xffF1E300);
static const Color green = Color(0xff7ED321);
static const Color red = Color(0xffEB3838);
static const Color darkGray = Color(0xff4A4A4A);
static const Color gray = Color(0xff9b9b9b);
static const Color lightGray = Color(0xfff5f5f4);
static const Color black = Color(0xff000000);
static const Color white = Color(0xffffffff);
static const Color clear = Color(0x00000000);
/// 深色背景
static const Color back1 = const Color(0xff1D1F22);
static const Color back1 = Color(0xff1D1F22);
/// 比深色背景略深一点
static const Color back2 = const Color(0xff121314);
static const Color back2 = Color(0xff121314);
}
......
import 'package:flutter/material.dart';
import 'package:one_poem/res/resources.dart';
class HomeActionWidgets extends StatelessWidget {
const HomeActionWidgets({
......