当前位置：网站首页>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();
},
),
],
);
});
}
},
),
);
}
}
边栏推荐
- Connectionreseterror: [winerror 10054] the remote host forced an existing connection to be closed
- 2022中国信通院首届业务与应用安全发展论坛成功召开！
- Random forest and poetry maker trained by AMR
- Why do many people want to change careers as programmers, while some programmers want to change careers as others?
- Use logrotate to automatically cut the website logs of the pagoda
- 如临现场的视觉感染力，NBA决赛直播还能这样看？
- Excel import / export convenience tool class
- Makefile introduction
- Making and using of static library
- Web3安全连载（3） | 深入揭秘NFT钓鱼流程及防范技巧
猜你喜欢
New listing of operation light 3.0 - a sincere work of self subversion across the times!
Array method in JS 2021.09.18
Day36 JS notes ecma6 syntax 2021.10.09
Unity screenshot function
JS foundation 8
Web page tips this site is unsafe solution
Industry analysis - quick intercom, building intercom
Recommended practice sharing of Zhilian recruitment based on Nebula graph
Fancy features and cheap prices! What is the true strength of Changan's new SUV?
Remote login sshd service
随机推荐
Tidb v6.0.0 (DMR): initial test of cache table - tidb Book rush
Is it feasible to be a programmer at the age of 26?
[semidrive source code analysis] [x9 chip startup process] 32 - play module analysis - RTOS side
Array method in JS 2021.09.18
js中this的默认指向及如何修改指向 2021.11.09
一套十万级TPS的IM综合消息系统的架构实践与思考
Web page tips this site is unsafe solution
Cannot redeclare block range variables
Why do many people want to change careers as programmers, while some programmers want to change careers as others?
Mysql使用max函数查询不到最大值
2022中国信通院首届业务与应用安全发展论坛成功召开！
6. calculation index
Setinterval, setTimeout and requestanimationframe
String & heap & method area
Excel import / export convenience tool class
.NET混合开发解决方案24 WebView2对比CefSharp的超强优势
Data analysis learning notes
[sciter]: use of sciter FS module scanning file API and its details
毕业了
Practice and Thinking on the architecture of a set of 100000 TPS im integrated message system