flutter自用样式模板

引入:

flutter_swiper_null_safety: ^1.0.0
flutter_staggered_grid_view: ^0.6.1

4张样式图:

代码:

homePage.dart

import 'dart:math';import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'dart:ui';import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';import 'StickyTabBarDelegate.dart';class Main extends StatefulWidget {const Main({Key? key, required this.title}) : super(key: key);final String title;@overrideState<Main> createState() => _MainState();
}class _MainState extends State<Main> {var _selectedIndex = 0;final _random = Random();final ScrollController _controller = ScrollController();final data = List.generate(15, (i) => Color(0xffaa1dff - 125 * i));var _onTypeClick = 0;final TextEditingController _editController = TextEditingController();final FocusNode _commentFocus = FocusNode();@overrideWidget build(BuildContext context) {_controller.addListener(() {if (_controller.position.pixels == _controller.position.maxScrollExtent) {_loadMoreData();}});_commentFocus.addListener(() {setState(() {});});_editController.addListener(() {setState(() {});});_waterFallList.clear();for (int i = 0; i < 24; i++) {_waterFallList.add(_random.nextDouble() * 50 + 50);}return Scaffold(body: _createBody(_selectedIndex),bottomNavigationBar: BottomNavigationBar(currentIndex: _selectedIndex,type: BottomNavigationBarType.fixed,onTap: (int index) {_selectedIndex = index;setState(() {});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.favorite),label: 'favorite',),BottomNavigationBarItem(icon: Icon(Icons.save),label: 'save',),BottomNavigationBarItem(icon: Icon(Icons.settings),label: 'settings',),],),);}List<Image> imageList = [Image.asset('images/1.jpg',fit: BoxFit.fill,),Image.asset('images/2.jpg',fit: BoxFit.fill,),Image.network("https://www.baidu.com/img/PC_9d6532110a742ba494be893d19bc80f8.png",fit: BoxFit.cover,),];final List _waterFallList = [];Widget _createBody(int index) {switch (index) {case 0:return CustomScrollView(slivers: <Widget>[SliverList(delegate: SliverChildBuilderDelegate((content, index) {return Center(child: Padding(padding: EdgeInsetsDirectional.fromSTEB(0, MediaQueryData.fromWindow(window).padding.top, 0, 0),child: Column(children: <Widget>[Row(mainAxisSize: MainAxisSize.min,children: <Widget>[Container(height: 40,width: MediaQuery.of(context).size.width / 10,color: Colors.blue,child:const Icon(Icons.accessible_forward_rounded)),Container(height: 40,width: MediaQuery.of(context).size.width / 10,color: Colors.blue,child: const Icon(Icons.accessible)),Container(alignment: Alignment.center,height: 40,color: Colors.blue,padding: const EdgeInsets.all(6),width: MediaQuery.of(context).size.width / 10 * 7,child: TextField(controller: _editController,focusNode: _commentFocus,decoration: InputDecoration(helperMaxLines: 1,contentPadding:  const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0),prefixIcon: _commentFocus.hasFocus? const Icon(Icons.search, color: Colors.black): null,suffixIcon: _editController.text.isNotEmpty? const Icon(Icons.clear): null,iconColor: Colors.black,filled: true,enabledBorder: const OutlineInputBorder(borderSide:BorderSide(color: Color(0x00FF0000)),borderRadius:BorderRadius.all(Radius.circular(20))),hintText: ' 内容',focusedBorder: const OutlineInputBorder(borderSide: BorderSide(color: Color(0x00000000)),borderRadius: BorderRadius.all(Radius.circular(20))),),),),Container(height: 40,width: MediaQuery.of(context).size.width / 10,color: Colors.blue,child: const Icon(Icons.accessibility_rounded)),],),SizedBox(width: MediaQuery.of(context).size.width,height: 190.0,child: Swiper(itemBuilder: (BuildContext context, int index) {return imageList[index];},loop: true,index: 2,autoplay: true,duration: 600,viewportFraction: 0.8,scale: 0.2,layout: SwiperLayout.TINDER,itemCount: imageList.length,pagination: const SwiperPagination(),control: const SwiperControl(),)),GridView(shrinkWrap: true,controller: _controller,gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5,crossAxisSpacing: 30,mainAxisSpacing: 10),children: [_createGridViewItem(Colors.primaries[1]),_createGridViewItem(Colors.primaries[2]),_createGridViewItem(Colors.primaries[3]),_createGridViewItem(Colors.primaries[4]),_createGridViewItem(Colors.primaries[5]),_createGridViewItem(Colors.primaries[6]),_createGridViewItem(Colors.primaries[7]),_createGridViewItem(Colors.primaries[8]),_createGridViewItem(Colors.primaries[9]),_createGridViewItem(Colors.primaries[10]),],),Card(child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[Row(mainAxisSize: MainAxisSize.min,children: [Container(alignment: Alignment.center,//设置控件内容的位置height: 60,width: MediaQuery.of(context).size.width / 4,margin: const EdgeInsets.all(5),child: const Expanded(child: Text('文本框选项 ',style: TextStyle(fontSize: 18),)),),_createCardViewItem(Colors.primaries[1]),_createCardViewItem(Colors.primaries[1]),_createCardViewItem(Colors.primaries[1]),],),],),),MasonryGridView.count(scrollDirection: Axis.vertical,// 展示几列crossAxisCount: 2,padding: const EdgeInsets.all(8),// 元素总个数itemCount: _waterFallList.length,// 单个子元素itemBuilder: (context, index) {return _waterCard(_waterFallList[index]);},// 纵向元素间距mainAxisSpacing: 10,// 横向元素间距crossAxisSpacing: 10,//本身不滚动，让外面的scrollview来滚动physics: const NeverScrollableScrollPhysics(),shrinkWrap: true, //收缩，让元素宽度自适应)],),));}, childCount: 1),)],);case 1:return Padding(padding: EdgeInsetsDirectional.fromSTEB(0, MediaQueryData.fromWindow(window).padding.top, 0, 0),child: Row(children: [SizedBox(width: MediaQuery.of(context).size.width / 4,child: ListView.builder(itemCount: 12,itemExtent: 26,itemBuilder: (BuildContext c, int index) {return _buildFavouriteTypeItem(index);},physics: const NeverScrollableScrollPhysics(),),),SizedBox(width: MediaQuery.of(context).size.width / 4 * 2.7,child: Center(child: GridView(gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,crossAxisSpacing: 8,mainAxisSpacing: 8),children: data.map((color) => _buildFavouriteItem(color)).toList(),),)),],),);case 2:return _createSTABBAR();default:return Padding(padding: EdgeInsetsDirectional.fromSTEB(0, MediaQueryData.fromWindow(window).padding.top, 0, 0),child: Column(children: <Widget>[Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height * 0.3,color: Colors.grey,child: const Center(child: CircleAvatar(radius: 50,backgroundColor: Colors.white, //未设置背景色，加载图片时会显示红色backgroundImage: NetworkImage("https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),)),),const Text("标题1"),Card(child: SizedBox(width: MediaQuery.of(context).size.width * 0.9,height: 52,child: Row(children: [_createCardViewItem(Colors.deepOrange),_createCardViewItem(Colors.deepPurple),_createCardViewItem(Colors.deepOrange),_createCardViewItem(Colors.deepPurple)])),),const Text('我的'),Card(child: SizedBox(width: MediaQuery.of(context).size.width * 0.9,height: 52,child: const ListTile(leading: Icon(Icons.access_alarm_rounded),title: Text('横条设置item1'),),)),Card(child: SizedBox(width: MediaQuery.of(context).size.width * 0.9,height: 52,child: const ListTile(leading: Icon(Icons.safety_divider_outlined),title: Text('横条设置item2'),),)),Card(child: SizedBox(width: MediaQuery.of(context).size.width * 0.9,height: 52,child: const ListTile(leading: Icon(Icons.settings),title: Text('横条设置item3'),),)),Card(child: SizedBox(width: MediaQuery.of(context).size.width * 0.9,height: 52,child: const ListTile(leading: Icon(Icons.sanitizer_sharp),title: Text('横条设置item6'),),)),],));}}Widget _createGridViewItem(Color color) {return Container(alignment: Alignment.center,//设置控件内容的位置height: 20,color: color,margin: const EdgeInsets.all(5),child: const Text('小标签'),);}Widget _createCardViewItem(Color color) {return Container(alignment: Alignment.center,//设置控件内容的位置height: 40,width: MediaQuery.of(context).size.width / 5,color: color,margin: const EdgeInsets.all(5),child: const Text('标签内容'),);}Widget _waterCard(double item) {return Container(height: item,decoration: BoxDecoration(border: Border.all(color: Colors.orange, width: 1),borderRadius: BorderRadius.circular(10)),child: Center(child: Text("卡片Item高度:${item.toStringAsFixed(0)}"),),);}Widget _createSTABBAR() {var tabTitle = ['tab1','tab2','tab3',];const url ='http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg';return DefaultTabController(length: tabTitle.length,child: Scaffold(body: NestedScrollView(headerSliverBuilder: (context, innerBoxIsScrolled) {return [SliverAppBar(expandedHeight: 180.0,floating: true,pinned: true,flexibleSpace: FlexibleSpaceBar(centerTitle: true,title: const Text("title",),background: Image.network(url,fit: BoxFit.cover,)),),SliverPersistentHeader(delegate: SliverTabBarDelegate(TabBar(tabs: tabTitle.map((f) => Tab(text: f)).toList(),indicatorColor: Colors.red,unselectedLabelColor: Colors.black,labelColor: Colors.red,),color: Colors.white,),pinned: true,),];},body: TabBarView(children: tabTitle.map((s) => MasonryGridView.count(scrollDirection: Axis.vertical,// 展示几列crossAxisCount: 2,// 元素总个数itemCount: _waterFallList.length,// 单个子元素itemBuilder: (context, index) {return _waterCard(_waterFallList[index]);},// 纵向元素间距mainAxisSpacing: 10,// 横向元素间距crossAxisSpacing: 10,//本身不滚动，让外面的scrollview来滚动physics: const NeverScrollableScrollPhysics(),shrinkWrap: true, //收缩，让元素宽度自适应)).toList(),),),));}//上拉加载函数Future<void> _loadMoreData() async {// 延迟1s增加数据return Future.delayed(const Duration(seconds: 2), () {if (mounted) {for (int i = 0; i < 5; i++) {_waterFallList.insert(_waterFallList.length, _random.nextDouble() * 50);}setState(() {});}});}GestureDetector _buildFavouriteTypeItem(int index) => GestureDetector(onTap: () {_onTypeClick = index;setState(() {});},onLongPress: () {},child: Container(alignment: Alignment.center,child: Text("type$index",style: TextStyle(color: index == _onTypeClick ? Colors.orangeAccent : Colors.red,shadows: const [Shadow(color: Colors.black,offset: Offset(.5, .5),blurRadius: 4)])),));Container _buildFavouriteItem(Color color) => Container(alignment: Alignment.center,width: 100,height: 30,color: color,child: const Text("FavoriteItem",style: TextStyle(color: Colors.white, shadows: [Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)]),),);
}

StickyTabBarDelegate.dart

import 'package:flutter/material.dart';class SliverTabBarDelegate extends SliverPersistentHeaderDelegate {final TabBar widget;final Color color;const SliverTabBarDelegate(this.widget, {required this.color});@overrideWidget build(BuildContext context, double shrinkOffset, bool overlapsContent) {return Container(color: color,child: widget,);}@overridebool shouldRebuild(SliverTabBarDelegate oldDelegate) {return false;}@overridedouble get maxExtent => widget.preferredSize.height;@overridedouble get minExtent => widget.preferredSize.height;
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';import 'homePage.dart';void main() {runApp(const MyApp());// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter',theme: ThemeData(primarySwatch: Colors.blue,),home: const Main(title: 'Flutter'),);}
}

使用的技术

瀑布流MasonryGridView
NestedScrollView+TabBarView
其余的基本就是基础控件

flutter自用样式模板相关推荐

WPF XAML 资源样式模板属性存放位置
WPF XAML 资源样式模板属性存放位置原文:WPF XAML 资源样式模板属性存放位置 WPF的XAML 资源申明类似HTML. 整体来说分3种 1.行类资源样式属性 1.1 行内属性 < ...
自定义Word样式模板，设置为默认模板
文章目录前言一.具体操作步骤前言由于在大学毕业写论文的时候,论文格式的要求十分严格,但是在完成论文编辑之后,发现这个论文的格式样式对于今后word排版大有益处,于是就将该论文的格式样式保存在一 ...
基于国家标准的 EndNote 输出样式模板
发表于 2013-05-26 作者 Haoxian Zeng 浏览 983 次 from:http://cnzhx.net/blog/endnote-output-style-cnzhx/ 1 End ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序测试用例模板_微信小程序样式：高质量小程序样式模板大全
新手想要制作出美观的小程序,你需要多参考一些好看的微信小程序样式.今天就带大家分析几个高质量小程序的样式,看看别是怎么把小程序做得美观又吸引人的: 1.电商小程序样式电商小程序首页一般是按照&quo ...
EndNote7.x/9.x 中基于国家标准的 EndNote 输出样式模板使用说明
window系统安装常用问题汇总欢迎学习交流! 邮箱: z-@1-6.com 网站: https://zephyrhours.github.io/ EndNote 7.2中没有中文参考文献的国家标 ...
导出期刊对应格式的参考_EndNote 输出样式模板（根据国家标准制订）
1. 模板下载请注意:这个模板输出的参考文献格式为按照引用在文中的出现顺序以数字编号的形式,例如: [1] 作者. 文章名称...... [2] ...... 附件是压缩文件,下载后请解压,里面名为 ...
常见的网站样式模板，网站设计助手
当一些个人或企业需要开发网站时,对于网站的样式.布局.结构却很茫然,这里为大家提供全网常见的网站类型和样式模板,可在线预览,为网站设计人员提供参考,也可以使用该模板意见生成网站,方便快捷,轻松建站,详 ...

flutter自用样式模板

引入:

4张样式图:

代码:

使用的技术

flutter自用样式模板相关推荐

最新文章

热门文章