news_getx/lib/modules/welcome/welcome_page.dart

156 lines
4.4 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:news_getx/theme/app_colors.dart';
import 'package:news_getx/theme/app_radii.dart';
import 'welcome_controller.dart';
class WelcomePage extends GetView<WelcomeController> {
const WelcomePage({Key? key}) : super(key: key);
Widget _buildPageHeadTitle() {
return Container(
margin: EdgeInsets.only(top: (60 + 44).h),
child: Text(
"Features",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24.sp,
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w600,
height: 1,
),
),
);
}
Widget _buildPageHeaderDetail() {
return Container(
width: 242.w,
height: 70.h,
margin: EdgeInsets.only(top: 14.h),
child: Text(
"The best of news channels all in one place. "
"Trusted sources and personalized news for you.",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontSize: 16.sp,
height: 1.3,
fontWeight: FontWeight.normal,
),
),
);
}
// 设定好了宽度
// 宽度 80 + 20 + 195 = 295
Widget _buildFeatureItem(String imageName, String intro, double marginTop) {
return Container(
width: 295.w,
height: 80.h,
margin: EdgeInsets.only(top: marginTop.h),
child: Row(
children: <Widget>[
SizedBox(
width: 80.w,
height: 80.h,
child: Image.asset(
"assets/images/$imageName.png",
fit: BoxFit.none,
),
),
Spacer(),
SizedBox(
width: 195.w,
child: Text(
intro,
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.normal,
fontSize: 16.sp,
),
),
)
],
),
);
}
Widget _buildStartButton() {
return Container(
width: 295.w,
height: 44.h,
margin: EdgeInsets.only(bottom: 20.h),
child: TextButton(
style: ButtonStyle(
// 设置字体大小
textStyle: MaterialStateProperty.all(TextStyle(fontSize: 16.sp)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(borderRadius: Radii.k6pxRadius),
),
backgroundColor: MaterialStateProperty.resolveWith((states) {
// 按压背景色
if (states.contains(MaterialState.pressed)){
return Colors.blue[200];
}
return AppColors.primaryElement;
}),
// 用于前景色调整 字体
foregroundColor: MaterialStateProperty.resolveWith((states) {
// 焦点但是没按的背景色
if (states.contains(MaterialState.focused) && !states.contains(MaterialState.pressed)) {
return Colors.blue;
}else if (states.contains(MaterialState.pressed)) {
return Colors.deepPurple;
}
return AppColors.primaryElementText;
})
),
onPressed: controller.handleNavSignIn,
child: Text("Get started"),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
// 标题
_buildPageHeadTitle(),
// 标题信息
_buildPageHeaderDetail(),
// 每一项内容
_buildFeatureItem(
"feature-1",
"Compelling photography and typography provide a beautiful reading",
86,
),
_buildFeatureItem(
"feature-2",
"Sector news never shares your personal data with advertisers or publishers",
40,
),
_buildFeatureItem(
"feature-3",
"You can get Premium to unlock hundreds of publications",
40,
),
Spacer(),
// 按钮
_buildStartButton()
],
),
),
);
}
}