当前位置：网站首页>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();
},
),
],
);
});
}
},
),
);
}
}
边栏推荐
- Fancy features and cheap prices! What is the true strength of Changan's new SUV?
- Dongyuhui, New Oriental and Phoenix Satellite TV
- 赛尔号抽奖模拟求期望
- Which programming language will attract excellent talents?
- Practice and Thinking on the architecture of a set of 100000 TPS im integrated message system
- Setinterval, setTimeout and requestanimationframe
- 【无标题】虚拟机vmnet0找不到且报错：没有未桥接的主机网络适配器
- Day29 JS notes 2021.09.23
- Why do many people want to change careers as programmers, while some programmers want to change careers as others?
- 携手Cigent：群联为SSD主控固件引入高级网络安全防护特性
猜你喜欢
如临现场的视觉感染力，NBA决赛直播还能这样看？
Simulation of the Saier lottery to seek expectation
day29 js笔记 2021.09.23
Simple understanding of ThreadLocal
Data analysis learning notes
Class pattern and syntax in JS 2021.11.10
Day30 JS notes BOM and DOM 2021.09.24
Necessary for beginners PR 2021 quick start tutorial, PR green screen matting operation method
day39 原型鏈及頁面烟花效果 2021.10.13
Day34 JS notes regular expression 2021.09.29
随机推荐
2. single digit statistics
Lihongyi, machine learning 7 Conclusion
QML control type: tabbar
Random forest and poetry maker trained by AMR
【sciter】: sciter-fs模块扫描文件API的使用及其注意细节
Introduction to GDB
day33 js笔记 事件（下）2021.09.28
无法重新声明块范围变量
day34 js笔记 正则表达式 2021.09.29
Fruit FL studio/cubase/studio one music host software comparison
Oracle date format exception: invalid number
Redis6 1: what problems can be solved by the introduction of NoSQL and redis?
Intranet penetration in the working group environment: some basic methods
赛尔号抽奖模拟求期望
Contract quantification system development (construction explanation) - contract quantification system development (source code analysis and ready-made cases)
Recommended practice sharing of Zhilian recruitment based on Nebula graph
5. Sum of N numbers
FTP protocol for Wireshark packet capture analysis
行业分析| 快对讲，楼宇对讲
Analyze whether there is duplicate data in the list and repeat it several times