GIF
homepage.gif
The UI is shown in figure
homepage.png
Demand analysis
- AppBar: Home page displays dynamic name and center, jumps to drawer icon
- Banner: picture display, manual switch, indicator, automatic rotation, click to jump
- LIstView: Slide whole, change the name of the home page based on the slide position (see the GIF demo at the end)
UI disassembly and implementation:
-
AppBar:
AppBar: new appBar (title: new Text('$_title'),// dynamically change title centerTitle: true, // center),// header title appBarCopy the code-
Banner:
Debunking 1: Picture show
Widget _buildItem(BuildContext context, int index) { HotNewsTopStoriesModel item = _fakeList[index]; return new GestureDetector( onTap: () { RouteUtil.route2Detail(context, '${item.id}'); / / by routing to jump to details}, child: new FadeInImage. MemoryNetwork (placeholder: kTransparentImage, image: the item image, height: widget._homeBannerHeight, fit: BoxFit.fitWidth), ); }Copy the codeTeardown 2: Manual sliding
new PageView.builder( controller: _pageController, itemBuilder: (BuildContext context, int index) { return _buildItem(context, index); }, itemCount: _fakeList.length, onPageChanged: (index) { _changePage(index); },)Copy the codeDebunking 3: Carousel (unlimited scrolling left and right)
_initFakeList() {for (int I = 0; i < fakeLength; i++) { _fakeList.addAll(widget.topList); }}Copy the codeDebunking 4: automatic rotation, and manual and automatic judgment
// Use time timer to poll, InitTimer () {_timer = new timer.periodic (_bannerDuration, (timer) { if(_isEndScroll){ _pageController.animateToPage(_curPageIndex + 1, duration: _bannerAnimationDuration, curve: Curves.linear); }}); Return new NotificationListener(onNotification: (ScrollNotification scrollNotification) { if (scrollNotification is ScrollEndNotification || scrollNotification is UserScrollNotification) { _isEndScroll = true; } else { _isEndScroll = false; } return false; },... .Copy the codeDebunking 5: Create indicators
// Create Widget _buildIndicators() {_initIndicators(); Return new Align(alignment: align.bottomCenter, child: new Container(color: color.black45, height: 20.0, child: New Center(Child: new SizedBox(width: widget.toplist. length * 16.0, height: 5.0, child: new Row(children: _indicators, mainAxisAlignment: MainAxisAlignment.spaceEvenly, ), ), )), ); } _initIndicators() { _indicators.clear(); for (int i = 0; i < widget.topList.length; I ++) {_indicators. Add (new SizedBox(width: 5.0, height: 5.0, child: new Container(color: I == _curIndicatorsIndex? Colors.white : Colors.grey, ), )); }}Copy the codeDebunking 6: Complete component integration
Widget-_buildbanner () {return new Container(height: widget-._homebannerheight, // The indicator is overlayed on the pagerView, so Stack child: new Stack( children: <Widget>[ _buildPagerView(), _buildIndicators(), ], ), ); }Copy the code-
ListView:
Disassemble 1: Basic Item
Widget _buildNormalItem(HotNewsStoriesModel item) { final String imgUrl = item.images[0]; final String title = item.title; final int id = item.id; return new InkWell( onTap: () { RouteUtil.route2Detail(context, '$id'); }, child: new Padding(Padding: const EdgeInsets. Only (left: 12.0, right: 12.0), child: new SizedBox(height: 0) Constant.normalItemHeight, child: new Column( children: <Widget>[ new Row( children: <Widget>[ new Expanded( child: New Text(title, style: new TextStyle(fontSize: 16.0, fontWeight: fontweight.w300),), new Padding(Padding: Const EdgeInsets. All (8.0), child: new SizedBox(height: 80.0, width: 80.0, child: new Image.network(imgUrl), ), ) ], ), new Expanded( child: new Align( alignment: Alignment.bottomCenter, child: CommonDivider.buildDivider(), ), ), ], ), ))); }Copy the codeDeconstruction 2: Date Item
Widget _buildDateTimeItem(HotNewsStoriesModel item) { final String dateTime = item.curDate; return new Container( color: Colors.blue, height: Constant.dateTimeItemHeight, child: new Center( child: New Text(dateTime, style: new TextStyle(fontSize: 16.0, fontWeight: fontweight.w300, color: color.white),),); }Copy the codeDebunking 3: ListView assembles items
Widget _buildItem(BuildContext Context, int index) {final HotNewsStoriesModel item = _normalDatas[index]; Widget widget; switch (item.itemType) { case HotNewsStoriesModel.itemTypeBanner: widget = new HomeBanner(_topDatas, Constant.bannerHeight); break; case HotNewsStoriesModel.itemTypeNormal: widget = _buildNormalItem(item); break; case HotNewsStoriesModel.itemTypeDate: widget = _buildDateTimeItem(item); break; } return widget; } the content = new ListView. Builder (/ / set physics properties always scrollable physics: AlwaysScrollableScrollPhysics (), the controller: _scrollController, itemCount: _normalDatas.length, itemBuilder: _buildItem, );Copy the codeDeconstruction 4: Refresh
var _refreshIndicator = new NotificationListener(
onNotification: _onNotification,
child: new RefreshIndicator(
key: _refreshIndicatorKey,
onRefresh: _refreshData,
child: content,
),
);
Copy the codeDebunking 5: Load more
Void _scrollListener () {/ / slide to the bottom to refresh the if (_scrollController. Position. The pixels = = _scrollController. Position. MaxScrollExtent) { _loadData(); }}Copy the codeDebunking 5: Change the title dynamically
// We can't find a way to listen to the slide to a specific Item, so we use a primitive method. Judgment according to the height of the displacement and the Items _computeShowtTitle (double offset) {/ / slide monitoring change the title if (_dateTimeOffsetList. IsNotEmpty) {if (offset.round() < _dateTimeOffsetList[0]) { _title = Constant.todayHot; setState(() {}); return; } for (int i = 0; i < _dateTimeOffsetList.length; i++) { if (i ! = _dateTimeOffsetList.length - 1) { if (offset.round() >= _dateTimeOffsetList[i].round() && _dateTimeOffsetList[i + 1].round() >= offset.round()) { String dateTime = DateUtil.formatDateWithWeek( _dateTimeList[i].subtract(new Duration(days: 1))); if (dateTime ! = _title) { setState(() { _title = dateTime; }); } break; } } else { if (offset.round() >= _dateTimeOffsetList[i].round() && _dateTimeOffsetList[i].round() >= offset.round()) { String dateTime = DateUtil.formatDateWithWeek( _dateTimeList[i].subtract(new Duration(days: 1))); if (dateTime ! = _title) { setState(() { _title = dateTime; }); } break; } } if (i ! = _dateTimeOffsetList.length - 1) { if (offset.round() < _dateTimeOffsetList[i + 1].round() && offset.round() > _dateTimeOffsetList[i].round()) { String dateTime = DateUtil.formatDateWithWeek(_dateTimeList[i]); if (dateTime ! = _title) { setState(() { _title = dateTime; }); } break; } } else { if (offset.round() < _dateTimeOffsetList[i].round() && offset.round() > _dateTimeOffsetList[i].round()) { String dateTime = DateUtil.formatDateWithWeek(_dateTimeList[i]); if (dateTime ! = _title) { setState(() { _title = dateTime; }); } break; } } } } }Copy the code