Continue above, nuggets app home page to improve. Different tabs display different styles.
Change the content according to the label
Effect:
The idea is to pass in the event that the tag is clicked, and then determine that the tag displays the content that is not used
Dart file, the tagButton method is used to pass parameters. This is just a snippet of the code
tagButton({title = 'tags'{})returnFlatButton( onPressed: () { setState(() { currentString = title; }); widget.onPress(title); )}},Copy the codeDart takes parameters in home_list.dart and displays different content
@override
Widget build(BuildContext context) {
return CommonListWiget(
scrollController: _scrollController,
networkApi: (currentPage) async {
Future.delayed(Duration(seconds: 2)).then((value) => {
dataList.addAll(['1'.'2'])});return dataList;
},
itemBuilder: (BuildContext context, int position) {
if (position == 0) {
return widget.tag == 'attention' ? peopleItems() : hotWidget();
}
returnlistItemWidget(); }); }Copy the codeThe contents of the peopleItems method are the contents of the page construct:
// global.randomcolor () writes a randomColor method in the Utils folder Global file
renderAvatar(index) {
return Positioned(
right: 18 + index * 16.toDouble(),
top: 15,
child: ClipOval(
child: Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Global.randomColor()),
),
));
}
peopleItems() {
return Container(
height: 50,
padding: EdgeInsets.symmetric(horizontal: 10),
margin: EdgeInsets.only(top: 10),
decoration: BoxDecoration(color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Find more good writers for nuggets',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Expanded(
child: Stack(
children: [
renderAvatar(0),
renderAvatar(1),
renderAvatar(2),
renderAvatar(3),
Positioned(
right: 0,
top: 15,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.grey,
size: 18() [() [() [() [() [() [() }Copy the codeDisplay function labels under different labels
Effect:
The idea is to write the logic in home_top.dart
String currentTag = 'all';
renderTagType() {
return Offstage(
offstage: currentString == 'attention' || currentString == 'recommendations',
child: Container(
height: 50,
width: Get.width,
padding: EdgeInsets.symmetric(horizontal: 10),
margin: EdgeInsets.only(top: 95 + (0 - 40 * widget.alpha / 255)),
child: Row(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
renderTagTypeButton('all'),
renderTagTypeButton('Java'),
renderTagTypeButton('back-end'),
renderTagTypeButton('Spring Boot'),
renderTagTypeButton('Go'),
renderTagTypeButton('Python'),
renderTagTypeButton('MySQL'),
renderTagTypeButton('Spring'),
renderTagTypeButton('Redius'),
renderTagTypeButton('JVM'),
renderTagTypeButton('algorithms'),
renderTagTypeButton('Database'),
],
),
)),
InkWell(
onTap: () {},
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.grey,
size: 18,),),),),),); } renderTagTypeButton(title) {return Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: FlatButton(
height: 30,
minWidth: 20,
shape: StadiumBorder(),
padding: EdgeInsets.symmetric(horizontal: 10),
color: currentTag == title
? Colors.blue
: Colors.grey.withOpacity(0.2),
onPressed: () {
setState(() {
currentTag = title;
});
},
child: Text(
title,
style: TextStyle(
fontSize: 14,
color: currentTag == title ? Colors.white : Colors.grey),
)));
}
Copy the codeFinally add the method to the build
//renderTag is a tag method that is extracted and placed inside a method
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: Get.context.mediaQueryPadding.top),
decoration: BoxDecoration(color: Colors.white),
child: Stack(
children: [renderSearch(), renderTag(), renderTagType()],
),
);
}
Copy the codeAchieve the end result
Divided into two steps to achieve, the first step click expand, expand the label
The first step
// Determine whether to expand
bool isExp = false;
ScrollController tagScroller = new ScrollController();
// Record the scroll position array
List scrollerIndex = [];
renderTagTypeButton(title) {
return Builder(builder: (BuildContext context) {
Rect rect = WidgetUtil.getWidgetBounds(context);
double width = rect.right +
(scrollerIndex.length > 0
? scrollerIndex[scrollerIndex.length - 1]
: 0);
if (scrollerIndex.length < data.length) {
scrollerIndex.add(width);
}
return Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: FlatButton(
height: 30,
minWidth: 20,
shape: StadiumBorder(),
padding: EdgeInsets.symmetric(horizontal: 10),
color: currentTag == title
? Colors.blue
: Colors.grey.withOpacity(0.2),
onPressed: () {
setState(() {
currentTag = title;
isExp = false;
});
int index = data.indexWhere((element) => element == title);
Future.delayed(Duration(milliseconds: 200)).then((value) => {
tagScroller.jumpTo(
scrollerIndex.length > 0 && index - 3 > 0
? scrollerIndex[index - 3]
: 0)}); }, child: Text( title, style: TextStyle( fontSize:14,
color: currentTag == title ? Colors.white : Colors.grey),
)));
});
}
Copy the codeThen the isExp field in the add dropdown click method is checked if the expansion is built with Wrap.
renderTagType() {
return Offstage(
offstage: currentString == 'attention' || currentString == 'recommendations',
child: Container(
width: Get.width,
padding: EdgeInsets.symmetric(horizontal: 10),
margin: EdgeInsets.only(top: 95 + (0 - 40 * widget.alpha / 255)),
child: Row(
children: [
Expanded(
child: isExp
? Wrap(
children: data
.map<Widget>((e) => renderTagTypeButton(e))
.toList(),
)
: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: tagScroller,
child: Row(
children: data
.map<Widget>((e) => renderTagTypeButton(e))
.toList(),
),
)),
Offstage(
offstage: isExp,
child: InkWell(
onTap: () {
setState(() {
isExp = !isExp;
});
},
child: Container(
padding: EdgeInsets.only(left: 10),
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.grey,
size: 24,),),))],),),); }Copy the codeThe second step
Effect:
final Function onTypePress;
Copy the codeClick the corresponding part to send out the parameters
//true expanded, false unexpanded
widget.onTypePress(false);
Copy the codeThe corresponding position is after clicking on the label
renderTagTypeButton( ... Omit code); tagButton( ... Omit code)Copy the codeDart and then add masking to the home_list.dart file.
final bool isExp;
@override
Widget build(BuildContext context) {
return Stack(
children: [
CommonListWiget(
scrollController: _scrollController,
networkApi: (currentPage) async {
Future.delayed(Duration(seconds: 2)).then((value) => {
dataList.addAll(['1'.'2'])});return dataList;
},
itemBuilder: (BuildContext context, int position) {
if (position == 0 && widget.tag == 'attention') {
return peopleItems();
} else if (position == 0 && widget.tag == 'recommendations') {
return hotWidget();
}
return listItemWidget();
},
),
Positioned(
top: widget.isExp ? 0 : Get.height,
child: InkWell(
onTap: () {},
child: Container(
height: Get.height,
width: Get.width,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.1(() [() [() [() [() }Copy the codeFinally, pass the parameters in the home_page.dart file
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(235.242.244.1),
body: Column(
children: [
HomeTopPage(
onSearchPress: () {},
onTagPress: () {},
alpha: _alpha,
onTypePress: (isBool) {
setState(() {
isExp = isBool;
});
},
onPress: (title) {
setState(() {
tag = title;
});
}),
Expanded(
child: HomeList(
onScroll: (value) {
setState(() {
_alpha = value;
});
},
tag: tag,
isExp: isExp)),
],
));
}
Copy the codeSearch page
This page needs to pay attention to the problem, not too much, are some basic logic and coding, so directly look at the effect of the code, the code of both pages are below
import 'package:flutter/material.dart';
import 'package:flutter_common_app/widget/common_list.dart';
import 'package:get/get.dart';
import 'package:sp_util/sp_util.dart';
class HomeSearchPage extends StatefulWidget {
HomeSearchPage({Key key}) : super(key: key);
@override
_HomeSearchPageState createState() => _HomeSearchPageState();
}
class _HomeSearchPageState extends State<HomeSearchPage> {
String currentString = 'comprehensive';
PageController controller = new PageController();
List dataList = [];
List historyList = [];
@override
void initState() {
super.initState();
List temp = SpUtil.getStringList('historyKey').toList();
setState(() {
historyList = temp;
});
}
renderHistory() {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
height: 40,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Search History',
style: TextStyle(
fontSize: 18, color: Colors.grey.withOpacity(0.8)),
),
IconButton(
icon: Icon(
Icons.auto_delete,
size: 18,
color: Colors.grey,
),
onPressed: () {
SpUtil.putStringList('historyKey'[]); setState(() { historyList = []; }); }) ], ), Wrap( children: historyList .map<Widget>((e) => FlatButton( height:30,
minWidth: 20,
shape: StadiumBorder(),
padding: EdgeInsets.symmetric(horizontal: 10),
color: Colors.grey.withOpacity(0.2),
onPressed: () {},
child: Text(
e,
style: TextStyle(fontSize: 14, color: Colors.grey),
)))
.toList(),
)
],
),
);
}
tagButton({title = 'comprehensive'{})return FlatButton(
onPressed: () {
setState(() {
currentString = title;
});
int tag = 0;
if (title == 'comprehensive') {
tag = 0;
} else if (title == 'articles') {
tag = 1;
} else if (title == 'tags') {
tag = 2;
} else if (title == 'users') {
tag = 3;
}
controller.animateToPage(tag,
duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Text(title,
style: currentString == title
? TextStyle(fontSize: 18, color: Colors.blue)
: TextStyle(fontSize: 18, color: Colors.grey)), ), Offstage( offstage: currentString ! = title, child: Container( height:2,
width: 40,
decoration: BoxDecoration(color: Colors.blue),
),
)
],
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(top: Get.context.mediaQueryPadding.top),
child: Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
height: 40,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.2),
borderRadius: BorderRadius.circular(8)),
child: Row(
children: [
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Icon(
Icons.search,
size: 18,
color: Colors.grey.withOpacity(0.5),
),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Expanded(
child: TextField(
autofocus: true,
onSubmitted: (value) {
List temp = SpUtil.getStringList('historyKey').toList();
temp.add(value);
SpUtil.putStringList('historyKey', temp);
setState(() {
historyList = temp;
dataList = value.contains('One morning')? ['1'.'1'] : [];
});
},
decoration: InputDecoration(
hintText: 'Search for articles/tags/users'.// border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 5),
border: OutlineInputBorder(
borderSide: BorderSide(
width: 0, color: Colors.transparent)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 0, color: Colors.transparent)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 0, color: Colors.transparent)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 0, color: Colors.transparent)),
),
style: TextStyle(fontSize: 14, color: Colors.grey),
))
],
),
)),
FlatButton(
minWidth: 20,
onPressed: () {
Get.back();
},
child: Text('cancel'),
textColor: Colors.blue),
],
),
),
Container(
decoration: BoxDecoration(color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
tagButton(title: 'comprehensive'),
tagButton(title: 'articles'),
tagButton(title: 'tags'),
tagButton(title: 'users'),
],
),
),
Expanded(
child: dataList.length == 0
? renderHistory()
: PageView.builder(
controller: controller,
itemBuilder: (context, index) {
return CommonListWiget(
networkApi: (currentPage) async {
// Future.delayed(Duration(seconds: 2)).then((value) => {
// dataList.addAll(['1', '2'])
/ /});
return dataList;
},
itemBuilder: (BuildContext context, int position) {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 5),
decoration: BoxDecoration(color: Colors.white),
child: Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.all(Radius.circular(5))),
),
Expanded(
child: Container(
height: 50,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'front end',
style: TextStyle(
fontSize: 16, color: Colors.grey),
),
Text(
'50.0 million followers ·5.2 million articles',
style: TextStyle(
fontSize: 14, color: Colors.grey),
),
],
),
)),
Container(
height: 30,
width: 70,
alignment: Alignment.center,
margin: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.3),
borderRadius: BorderRadius.circular(15),
),
child: Text('Concerned',
style: TextStyle(
fontSize: 14, color: Colors.grey)), ) ], ), ); }); }, scrollDirection: Axis.horizontal, onPageChanged: (index) {String tag = ' ';
if (index == 0) {
tag = 'comprehensive';
} else if (index == 1) {
tag = 'articles';
} else if (index == 2) {
tag = 'tags';
} else if (index == 3) {
tag = 'users';
}
setState(() {
currentString = tag;
});
},
itemCount: 4,)))); }}Copy the codeThe tag page
Same as previous page
import 'package:flutter/material.dart';
import 'package:flutter_common_app/widget/common_app_bar.dart';
import 'package:flutter_common_app/widget/common_list.dart';
class HomeTagPage extends StatefulWidget {
HomeTagPage({Key key}) : super(key: key);
@override
_HomeTagPageState createState() => _HomeTagPageState();
}
class _HomeTagPageState extends State<HomeTagPage> {
String currentString = 'All labels';
PageController controller = new PageController();
List dataList = ['1'.'1'.'1'];
tagButton({title = 'All labels'{})return FlatButton(
onPressed: () {
setState(() {
currentString = title;
});
controller.animateToPage(title == 'All labels' ? 0 : 1,
duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Text(title,
style: currentString == title
? TextStyle(fontSize: 18, color: Colors.blue)
: TextStyle(fontSize: 18, color: Colors.grey)), ), Offstage( offstage: currentString ! = title, child: Container( height:2,
width: 80,
decoration: BoxDecoration(color: Colors.blue),
),
)
],
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: customAppbar(title: 'Tag Management'),
body: Column(
children: [
Container(
decoration: BoxDecoration(color: Colors.white),
margin: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
tagButton(title: 'All labels'),
tagButton(title: 'Concerned tags'),
],
),
),
Expanded(
child: PageView.builder(
controller: controller,
itemBuilder: (context, index) {
return CommonListWiget(
networkApi: (currentPage) async {
Future.delayed(Duration(seconds: 2)).then((value) => {
dataList.addAll(['1'.'2'])});return dataList;
},
itemBuilder: (BuildContext context, int position) {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.only(top: 5),
decoration: BoxDecoration(color: Colors.white),
child: Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.all(Radius.circular(5))),
),
Expanded(
child: Container(
height: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'front end',
style:
TextStyle(fontSize: 16, color: Colors.grey),
),
Text(
'50.0 million followers ·5.2 million articles',
style:
TextStyle(fontSize: 14, color: Colors.grey),
),
],
),
)),
Container(
height: 30,
width: 70,
alignment: Alignment.center,
margin: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.3),
borderRadius: BorderRadius.circular(15),
),
child: Text('Concerned',
style:
TextStyle(fontSize: 14, color: Colors.grey)), ) ], ), ); }); }, scrollDirection: Axis.horizontal, onPageChanged: (index) { setState(() { currentString = index ==0 ? 'All labels' : 'Concerned tags';
});
},
itemCount: 2() [(), (); }}Copy the codeTo complete. I’m just finishing my project. Welcome to talk about it
one more things…
-
Gold nuggets APP boiling point