B standing video
www.bilibili.com/video/BV1t5…
In this section, the target
- See the Supernova code generator
- Import xD design draft
- How to use generated code efficiently
The body of the
Code generator
- supernova
- imgcook
Potential for code generation
- lanhuapp
- mockplus
Supernova code generator
supernova.io/
Import xD design draft and generate code
Commercial design is not easy to share directly, you can add wechat contact Ducafecat
Write user-centric interface code
Organization code structure
class _AccountPageState extends State<AccountPage> {
// Personal page header
Widget _buildUserHeader() {}
/ / the list items
Widget _buildCell() {}
@override
Widget build(BuildContext context) {
final appState = Provider.of<AppState>(context);
returnSingleChildScrollView( child: Column( children: <Widget>[ _buildUserHeader(), _buildCell(), ], ), ); }}Copy the codeUse the generated code directly
- Personal page header
Widget _buildUserHeader() {
return Container(
height: 333,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: 333,
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 2,
decoration: BoxDecoration(
color: AppColors.primaryElement,
),
child: Container(),
),
],
),
),
),
Positioned(
left: 20,
top: 40,
right: 20,
bottom: 21,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 198,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: 108,
height: 108,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
child: Container(
width: 108,
height: 108,
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius: Radii.k54pxRadius,
),
child: Container(),
),
),
Positioned(
top: 10,
child: Image.asset(
"assets/images/image.png",
fit: BoxFit.none,
),
),
],
),
),
),
Spacer(),
Container(
margin: EdgeInsets.only(bottom: 9),
child: Text(
"Cameron Rogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
),
Text(
"@boltrogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
height: 44,
child: FlatButton(
onPressed: () => this.onButtonPressed(context),
color: Color.fromARGB(255.41.103.255),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
),
textColor: Color.fromARGB(255.255.255.255),
padding: EdgeInsets.all(0),
child: Text(
"Get the Premium - \ $9.99",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.secondaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18,),),),),),),),,,); }Copy the code- The list items
Widget _buildCell() {
return Container(
height: 60,
child: Stack(
alignment: Alignment.centerLeft,
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: 60,
decoration: BoxDecoration(
color: AppColors.secondaryElement,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 1,
decoration: BoxDecoration(
color: AppColors.primaryElement,
),
child: Container(),
),
],
),
),
),
Positioned(
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: EdgeInsets.only(right: 11),
child: Text(
"12",
textAlign: TextAlign.right,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Container(
width: 24,
height: 24,
margin: EdgeInsets.only(right: 20),
child: Image.asset(
"assets/images/icon.png",
fit: BoxFit.none,
),
),
],
),
),
Positioned(
left: 0,
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: 0,
right: 19,
child: Container(),
),
Positioned(
left: 20,
right: 0,
child: Text(
"Favorite channels",
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18() [[() [[() [[() [() [() [() [() }Copy the codeExtraction code lib/common/widgets/app. The dart
/// 10 pixel Divider
Widget divider10Px({Color bgColor = AppColors.secondaryElement}) {
return Container(
height: duSetWidth(10),
decoration: BoxDecoration(
color: bgColor,
),
);
}
Copy the codeChange the code _buildUserHeader
// Personal page header
Widget _buildUserHeader() {
return Container(
height: duSetWidth(333),
child: Stack(
alignment: Alignment.center,
children: [
/ / the background
Positioned(
left: 0,
right: 0,
child: Container(
height: duSetWidth(333),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: duSetWidth(2),
decoration: BoxDecoration(
color: AppColors.tabCellSeparator,
),
child: Container(),
),
],
),
),
),
Positioned(
left: 20,
top: 40,
right: 20,
bottom: 21,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
/ / avatar
Container(
height: duSetWidth(198),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: duSetWidth(108),
height: duSetWidth(108),
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: 0,
child: Container(
width: duSetWidth(108),
height: duSetWidth(108),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
boxShadow: [
Shadows.primaryShadow,
],
borderRadius: BorderRadius.all(
Radius.circular(duSetWidth(108) / 2)),
),
child: Container(),
),
),
Positioned(
top: 10,
child: Image.asset(
"assets/images/account_header.png",
height: duSetWidth(88),
width: duSetWidth(88),
fit: BoxFit.fill,
),
),
],
),
),
),
/ / text
Spacer(),
Container(
margin: EdgeInsets.only(bottom: 9),
child: Text(
Global.profile.displayName,
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 24,
),
),
),
Text(
"@boltrogers",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: 16() [() [() [()/ / button
Spacer(),
Container(
height: 44,
child: FlatButton(
onPressed: () => {},
color: Color.fromARGB(255.41.103.255),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6)),
),
textColor: Color.fromARGB(255.255.255.255),
padding: EdgeInsets.all(0),
child: Text(
"Get the Premium - \ $9.99",
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.primaryElementText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: 18,),),),),),),),,,); }Copy the codeModify the code _buildCell
/ / the list items
Widget _buildCell({
String title,
String subTitle,
int number,
bool hasArrow = false,
VoidCallback onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
height: duSetWidth(60),
color: Colors.white,
child: Stack(
alignment: Alignment.centerLeft,
children: [
/ / the background
Positioned(
left: 0,
right: 0,
child: Container(
height: duSetWidth(60),
decoration: BoxDecoration(
color: AppColors.primaryBackground,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: duSetWidth(1),
decoration: BoxDecoration(
color: AppColors.tabCellSeparator,
),
child: Container(),
),
],
),
),
),
/ / on the right side
Positioned(
right: 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
/ / digital
number == null
? Container()
: Container(
margin: EdgeInsets.only(right: 11),
child: Text(
number.toString(),
textAlign: TextAlign.right,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Avenir",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),),),),/ / arrow
hasArrow == false
? Container()
: Container(
width: duSetWidth(24),
height: duSetWidth(24),
margin: EdgeInsets.only(right: 20),
child: Icon(
Icons.arrow_forward_ios,
color: AppColors.primaryText,
),
),
],
),
),
/ / title
title == null
? Container()
: Positioned(
left: 20,
child: Text(
title,
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18),),),),/ / subheadings
subTitle == null
? Container()
: Positioned(
right: 20,
child: Text(
subTitle,
textAlign: TextAlign.left,
style: TextStyle(
color: AppColors.primaryText,
fontFamily: "Montserrat",
fontWeight: FontWeight.w400,
fontSize: duSetFontSize(18(() (() [() (() [() (() [() (() }Copy the codeModify the code build
@override
Widget build(BuildContext context) {
final appState = Provider.of<AppState>(context);
return SingleChildScrollView(
child: Column(
children: <Widget>[
_buildUserHeader(),
divider10Px(),
_buildCell(
title: "Email",
subTitle: "[email protected]",
),
divider10Px(),
_buildCell(
title: "Favorite channels",
number: 12,
hasArrow: true,
),
_buildCell(
title: "Bookmarks",
number: 294,
hasArrow: true,
),
_buildCell(
title: "Popular categories",
number: 7,
hasArrow: true,
),
divider10Px(),
_buildCell(
title: "Newsletter",
hasArrow: true,
),
_buildCell(
title: "Settings",
hasArrow: true,
),
divider10Px(),
_buildCell(
title: "Switch Gray Filter",
hasArrow: true,
onTap: () => appState.switchGrayFilter(),
),
_buildCell(
title: "Log out",
hasArrow: true,
onTap: () => goLoginPage(context),
),
divider10Px(),
],
),
);
}
Copy the codeskills
- Vscode fixed code
conclusion
resources
Design draft Blue Lake preview
lanhuapp.com/url/lYuz1 Password: gSKl
Blue Lake now charges, so please upload xD design draft by yourself to check the mark. Commercial design draft file is not easy to share directly, you can add wechat to contact Ducafecat
code
Github.com/ducafecat/f…