当前位置：网站首页>Self use demo of basic component integration of fluent
Self use demo of basic component integration of fluent
2022-06-28 11:57:00 【Work hard for someone】
The controls used are :
Container,ListView,ListTile,Scaffold,Row,Column,Card,ClipRRect,Image,TextField,SizedBox,Icon,Text,Swiper,Toast
First demo chart :
Dependencies used :
fluttertoast: ^8.0.8
flutter_swiper_null_safety: ^1.0.0
Introduction to the controls used
The overall control uses Scaffold
- appBar
One at the top of the screen AppBar
appBar: AppBar(
title: const Text(
" title ",
textAlign: TextAlign.center,
),
actions: const [
Icon(
Icons.list_rounded,
color: Colors.orange,
)
],
),
- body
The main contents of the current interface Widget
body: GestureDetector(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_viewpage(context),
_listView(),
_item(),
_editText()
],
),
),
- bottomNavigationBar
The navigation bar at the bottom of the page
When you click on page 2 Button (i=1) Will pop up when dialog
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
label: " home page ",
icon: Icon(
Icons.home,
),
),
BottomNavigationBarItem(
label: "BottomNavigationBarItem_ Button 2",
icon: Icon(
Icons.bike_scooter,
),
),
BottomNavigationBarItem(
label: "BottomNavigationBarItem_ Button 3",
icon: Icon(
Icons.bike_scooter,
),
),
],
currentIndex: currentIndex,
onTap: (int i) {
showDialog<Null>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text(' Select Popup '),
children: [
SimpleDialogOption(
child: Text(' Options 1'),
onPressed: () {
Navigator.of(context).pop();
},
),
SimpleDialogOption(
child: Text(' Options 2'),
onPressed: () {
Navigator.of(context).pop();
},
),
SimpleDialogOption(
child: Text(' Options 3'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});},
),
- Drawer layout drawer/endDrawer
drawer: Drawer(
child: _buildLoadingView(),
),
endDrawer: Drawer(
child: _ListWheelView(),
),
- floatingActionButton
floatingActionButton: new FloatingActionButton(
onPressed: () {
},
child: new Icon(Icons.add),
elevation: 3.0,
highlightElevation: 2.0,
backgroundColor: Colors.blue,
),
- lodingview
Widget _buildLoadingView() {
return Container(
width: double.maxFinite,
height: 100,
child: const Center(
child: SizedBox(
height: 50.0,
width: 50.0,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
),
),
);
}
- ListWheelScrollView
Widget _ListWheelView() {
return Container(
child: ListWheelScrollView(
// Height
itemExtent: 20,
//ListWheelScrollView The rendering effect is similar to the wheel , Set up diameterRatio Adjust its diameter properties ：
diameterRatio: 1,
// Property indicates the degree to which the wheel is horizontally off center , Usage is as follows
offAxisFraction: 0,
// adopt useMagnifier and magnification Property to achieve magnifier effect ,useMagnifier Whether to enable the magnifier ,magnification Property is magnification , Usage is as follows ：
useMagnifier: true,
magnification: 1.5,
squeeze: 1,
children: <Widget>[
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
],
),
);
}
- viewpager
Mainly Image and swiper Usage of , Need to introduce dependency flutter_swiper_null_safety: ^1.0.0
Image.asset() The resource file should be in pubspec.yaml Zhongjia is good
images It's the folder I created in the directory
List<Image> imageList = [
Image.asset(
'images/1.png',
fit: BoxFit.fill,
),
Image.asset(
'images/2.png',
fit: BoxFit.fill,
),
Image.network(
"https://www.baidu.com/img/PC_9d6532110a742ba494be893d19bc80f8.png",
fit: BoxFit.cover,
),
];
Widget _viewpage(BuildContext context) {
return Container(
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: SwiperPagination(),
control: SwiperControl(),
));
}
- listview
Mainly ListTile Usage of , If you need a roller, insert one on the outside Scrollbar,
Click the event as : Gradient color with icon Toast
Widget _listView() {
return Container(
height: 40,
child: ListView(
// Set the direction
scrollDirection: Axis.horizontal,
// Set margins
padding: const EdgeInsets.all(4.0),
// item Width
itemExtent: 150,
// When the scrolling direction is vertical , that itemExtent = The height of the child control
// When the scroll direction is horizontal , that itemExtent = The width of the child control
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
Scaffold(
body: ListTile(
title: const Text(' Click to have toast'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 2'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 3'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 4'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 5'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 6'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 7'),
onTap: _showToast,
)),
const Scaffold(
body: ListTile(
title: Text('ListView label 8'),
)),
],
),
);
}
- demo Components sorted horizontally and vertically in the figure
Here we use :Card,Text,Image,AspectRatio,ClipRRect,Container,MaterialButton
Widget _item() {
return Container(
margin: const EdgeInsets.all(16),
child: Row(
verticalDirection: VerticalDirection.up,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.all(20),
child: Column(
children: [
const Text('Container+Column: below 2 individual '),
MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: const Text('Row+Container: On the right 3 individual '),
onPressed: () {
},
),
],
),
),
Container(
width: 170,
height: 50,
color: Colors.green,
margin: EdgeInsets.all(20),
child: AspectRatio(
aspectRatio: 2.0 / 1.0,
child: Text(
'AspectRatio Horizontal to vertical ratio +Text',
style: textStyle,
),
),
transform: Matrix4.rotationZ(0.5),
),
Card(
margin: EdgeInsets.all(5),
child: Column(
children: const [
Text('Card'),
],
),
),
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
child: Image.asset(
'images/1.png',
width: 300,
height: 100,
),
),
],
),
);
}
- Input box
TextField
Widget _editText() {
return TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: " Input box ",
),
);
}
- Toast
Need to introduce fluttertoast: ^8.0.8
_showToast() {
fToast.removeQueuedCustomToasts();
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
gradient: LinearGradient(
// Gradient position
begin: Alignment.topRight, // The upper right
end: Alignment.bottomLeft, // The lower left
stops: [
0.2,
0.8
],
// Gradient color [ Starting point color , End color ]
colors: [
Color.fromRGBO(10, 135, 224, 1.0),
Color.fromRGBO(217, 13, 42, 1.0)
]),
borderRadius: BorderRadius.circular(12.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text('Toast')
],
),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2));
return toast;
}
Complete code
Newbie on the road , If there is any mistake, please criticize and correct
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ModelWidget(),
);
}
}
class ModelWidget extends StatelessWidget {
var fToast = FToast();
int currentIndex = 0;
var textStyle = TextStyle(fontSize: 15, color: Colors.yellow);
List<Image> imageList = [
Image.asset(
'images/1.png',
fit: BoxFit.fill,
),
Image.asset(
'images/2.png',
fit: BoxFit.fill,
),
Image.network(
"https://www.baidu.com/img/PC_9d6532110a742ba494be893d19bc80f8.png",
fit: BoxFit.cover,
),
];
Widget _viewpage(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: 170.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: SwiperPagination(),
control: SwiperControl(),
));
}
Widget _buildLoadingView() {
return Container(
width: double.maxFinite,
height: 100,
child: const Center(
child: SizedBox(
height: 50.0,
width: 50.0,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
),
),
);
}
Widget _listView() {
return Container(
height: 40,
child: ListView(
// Set the direction
scrollDirection: Axis.horizontal,
// Set margins
padding: const EdgeInsets.all(4.0),
// item Width
itemExtent: 150,
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
Scaffold(
body: ListTile(
title: const Text(' Click to have toast'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 2'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 3'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 4'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 5'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 6'),
onTap: _showToast,
)),
Scaffold(
body: ListTile(
title: const Text('ListView label 7'),
onTap: _showToast,
)),
const Scaffold(
body: ListTile(
title: Text('ListView label 8'),
)),
],
),
);
}
Widget _item() {
return Container(
margin: const EdgeInsets.all(16),
child: Row(
verticalDirection: VerticalDirection.up,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.all(20),
child: Column(
children: [
const Text('Container+Column: below 2 individual '),
MaterialButton(
color: Colors.blue,
textColor: Colors.white,
child: const Text('Row+Container: On the right 3 individual '),
onPressed: () {
},
),
],
),
),
Container(
width: 170,
height: 50,
color: Colors.green,
margin: EdgeInsets.all(20),
child: AspectRatio(
aspectRatio: 2.0 / 1.0,
child: Text(
'AspectRatio Horizontal to vertical ratio +Text',
style: textStyle,
),
),
transform: Matrix4.rotationZ(0.5),
),
Card(
margin: EdgeInsets.all(5),
child: Column(
children: const [
Text('Card'),
],
),
),
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
child: Image.asset(
'images/1.png',
width: 300,
height: 100,
),
),
],
),
);
}
Widget _editText() {
return TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
hintText: " Input box ",
),
);
}
Widget _ListWheelView() {
return Container(
child: ListWheelScrollView(
// Height
itemExtent: 20,
//ListWheelScrollView The rendering effect is similar to the wheel , Set up diameterRatio Adjust its diameter properties ：
diameterRatio: 1,
// Property indicates the degree to which the wheel is horizontally off center , Usage is as follows
offAxisFraction: 0,
// adopt useMagnifier and magnification Property to achieve magnifier effect ,useMagnifier Whether to enable the magnifier ,magnification Property is magnification , Usage is as follows ：
useMagnifier: true,
magnification: 1.5,
squeeze: 1,
children: <Widget>[
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
Text('123'),
],
),
);
}
_showToast() {
fToast.removeQueuedCustomToasts();
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
gradient: LinearGradient(
// Gradient position
begin: Alignment.topRight, // The upper right
end: Alignment.bottomLeft, // The lower left
stops: [
0.2,
0.8
],
// Gradient color [ Starting point color , End color ]
colors: [
Color.fromRGBO(10, 135, 224, 1.0),
Color.fromRGBO(217, 13, 42, 1.0)
]),
borderRadius: BorderRadius.circular(12.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text('Toast')
],
),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2));
return toast;
}
@override
Widget build(BuildContext context) {
fToast.init(context);
return Scaffold(
appBar: AppBar(
title: const Text(
" title ",
textAlign: TextAlign.center,
),
/* Will be endDrawer Block , So here's a comment actions: const [ Icon( Icons.list_rounded, color: Colors.orange, ) ],*/
),
drawer: Drawer(
child: _buildLoadingView(),
),
endDrawer: Drawer(
child: _ListWheelView(),
),
body: GestureDetector(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_viewpage(context),
_listView(),
_item(),
_editText(),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
},
child: new Icon(Icons.add),
elevation: 3.0,
highlightElevation: 2.0,
backgroundColor: Colors.blue,
),
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
label: " home page ",
icon: Icon(
Icons.home,
),
),
BottomNavigationBarItem(
label: "BottomNavigationBarItem_ Button 2",
icon: Icon(
Icons.bike_scooter,
),
),
BottomNavigationBarItem(
label: "BottomNavigationBarItem_ Button 3",
icon: Icon(
Icons.bike_scooter,
),
),
],
currentIndex: currentIndex,
onTap: (int i) {
if (i == 1) {
showDialog<Null>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text(' Select Popup '),
children: [
SimpleDialogOption(
child: Text(' Options 1'),
onPressed: () {
Navigator.of(context).pop();
},
),
SimpleDialogOption(
child: Text(' Options 2'),
onPressed: () {
Navigator.of(context).pop();
},
),
SimpleDialogOption(
child: Text(' Options 3'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
});
}
},
),
);
}
}
边栏推荐
- Chapter 2 do you remember the point, line and surface (2)
- 來吧元宇宙，果然這熱度一時半會兒過不去了
- Splicing strings in the string collection_ Stream based
- day25 js中的预解析、递归函数、事件 2021.09.16
- When an entity is converted to JSON, the field with null value is lost
- js中this的默认指向及如何修改指向 2021.11.09
- Web page tips this site is unsafe solution
- FTP protocol for Wireshark packet capture analysis
- Simulation of the Saier lottery to seek expectation
- Day32 JS note event (Part 1) September 27, 2021
猜你喜欢
如临现场的视觉感染力，NBA决赛直播还能这样看？
What method is required for word, PDF and txt files to realize full-text content retrieval?
day33 js笔记 事件（下）2021.09.28
一套十万级TPS的IM综合消息系统的架构实践与思考
Necessary for beginners PR 2021 quick start tutorial, PR green screen matting operation method
Data analysis learning notes
The default point of this in JS and how to modify it to 2021.11.09
2018 joint examination of nine provinces & Merging of line segment trees
Why do many people want to change careers as programmers, while some programmers want to change careers as others?
Industry analysis - quick intercom, building intercom
随机推荐
JS foundation 8
day36 js笔记 ECMA6语法 2021.10.09
Splicing strings in the string collection_ Stream based
Mysql使用max函数查询不到最大值
2022中国信通院首届业务与应用安全发展论坛成功召开！
IO stream of file and Base64
6.A-B
培训通知｜2022年境外中资企业机构及人员疫情防控和安全防范专题培训通知
Graphics view framework for QT learning (to realize startup animation)
Unity screenshot function
What method is required for word, PDF and txt files to realize full-text content retrieval?
2022 open source software security status report: over 41% of enterprises do not have enough confidence in open source security
【北京航空航天大学】考研初试复试资料分享
Fruit FL studio/cubase/studio one music host software comparison
Solutions to connection failures and errors when accessing mysql8 using the SSM project
Int~long long indicates the maximum and minimum number
Pre parsing, recursive functions and events in day25 JS 2021.09.16
recent developments
【sciter】: sciter-fs模块扫描文件API的使用及其注意细节
Using soapUI to obtain freemaker's FTL file template