preface
The last time I wrote an article related to flutter was in July. Now flutter 2.5 has been officially released, and the official website has taken on a new look.
So, don't wait. It's time to learn. Start recording some common syntax of dart in the development of fluent, which can help us get twice the result with half the effort.
About Dart
Dart is a client optimized programming language for building fast applications for the whole platform. Its advantages are as follows:
- Build for UI: optimize development using a language optimized for user interface creation
- Improve R & D Productivity: you can modify it repeatedly, and then use hot overload in running applications to see your changes immediately
- Run at high speed on the whole platform: it can be compiled into binary files of arm & x64 on the mobile end, desktop end and back end, or Javascript for the Web platform
Next, it mainly records the dart syntax commonly used in the development of flutter, and then how to realize some small functions of flutter more conveniently and quickly. More dart related knowledge points will not be repeated here, but we can systematically learn dart language on the official website, which is also a necessary language for flutter development. The official address is as follows: dart: https://dart.cn/
Common methods of List array
Array is the most common collection type in almost all programming languages. In dart, array is represented by List object. Next, use the dart tool to run these common methods: https://dartpad.cn
- Define a fixed length array
void main() { var list = List(2); print('$list'); // [null, null]}- Define mixed type arrays
void main() {
var list = List<dynamic>();
list.add('I'm text');
list.add(0.66);
print(list); // [I'm text, 0.66]}- Gets the first element of the array
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.first); // 1
}- Gets the last element of the array
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.last); // 6
}- Get inverted iterator - reversed
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.reversed); // (6, 6, 5, 4, 3, 2, 2, 1)
}- Batch add - addAll or Extension operators (...) and Null aware extension operator (...?)
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
var list2 = [0, 20, 40];
list.addAll(list2);
print(list); //[1, 2, 2, 3, 4, 5, 6, 6, 0, 20, 40]
}Or use the extension operator, and the result is the same
void main() {
var list2 = [0, 20, 40];
var list = [1, 2, 2, 3, 4, 5, 6, 6, ...?list2];
print(list); //[1, 2, 2, 3, 4, 5, 6, 6, 0, 20, 40]
}- Determine whether there are elements in the array that meet the conditions - any
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];// Is there an element greater than 3 in the array
print(list.any((v) => v > 3)); // true
// Is there any element greater than 7 in the array
print(list.any((v) => v > 7)); // false
}- Judge whether all elements of the array meet the set condition - every
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// Are all elements in the array greater than 0
print(list.every((v) => v > 0)); // true
// Are all elements in the array greater than 5
print(list.every((v) => v > 5)); // false
}- Get the element that meets the condition - where
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// Get all elements greater than 3
print(list.where((v) => v > 3).toList()); //[4, 5, 6, 6]
}- Get the first element that meets the condition - firstWhere
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6]; // Gets the last element greater than 3
print(list.firstWhere((v) => v > 3)); // 4
// If the element of the specified condition is not found, enter the orElse parameter
list.firstWhere((v) => v > 6, orElse: () {
print(888);
});
}Get the last element that meets the condition - lastWhere (same as firstWhere, the difference between the first one and the last one)
- Starting from the specified location, get the index of the first element that meets the condition - indexWhere
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// Query the index value of the first element greater than 3
print(list.indexWhere((v) => v > 3)); // 4
// Starting from index 3, query the index value of the first element greater than 4
print(list.indexWhere((v) => v > 4, 3)); // 5
// Starting from index 3, query the index value of the first element greater than 6
// If it does not exist, - 1 is returned
print(list.indexWhere((v) => v > 6, 3)); // -1
}Get the index of the last element satisfying the condition (flashback query) - lastIndexWhere (the same as indexWhere, the difference between the first and the last)
- Gets the index of the specified value from the specified location - indexOf
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// Starting from index 6, get the index value of the first occurrence of 5. If it does not exist, return - one
print(list.indexOf(5, 6)); // -1
print(list.indexOf(5)); // 5
}Starting from the specified location, flashback obtains the index of the specified value - lastIndexOf (the same as indexOf, the difference between the first and last time)
- Concatenate the array into a string with the specified character - join
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// Converts an array to a string concatenated with English commas
print(list.join(',')); // 1,2,2,3,4,5,6,6
}- Array de duplication - toSet
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
print(list.toSet()); // {1, 2, 3, 4, 5, 6}
}- Array traversal - for\for in\forEach
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
//for
for (var i = 0; i < list.length; i++) {
print("for:$i");
}
//for in
for (var item in list) {
print("for in:$item");
}
//forEach
list.forEach((element) {
print("forEach:$element");
});
}- Return according to specified conditions - map
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6]; // Adds 1 to all elements of the list and returns an array
var v = list.map((e) {
return e + 1;
}).toList();
print(v); //[2, 3, 3, 4, 5, 6, 7, 7]
}- Accumulator - reduce
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];// Execute each return value as a value loop. Finally, the last execution value is returned
var count = list.reduce((value, element) {
print('value: $value - element: $element');
/** Results of each execution
value: 1 - element: 2
value: 3 - element: 2
value: 5 - element: 3
value: 8 - element: 4
value: 12 - element: 5
value: 17 - element: 6
value: 23 - element: 6
*/
return value + element;
});
print('count: $count'); // count: 29
}- Sort - sort
void main() {
var list = [1, 2, 2, 3, 4, 5, 6, 6];
// a - b In ascending order, b - A is in descending order
list.sort((a, b) { return b - a; });
print(list); //[6, 6, 5, 4, 3, 2, 2, 1]
}Conditional expressions and if statements ~ are used in layouts
When developing and writing pages in fluent, we often deal with some judgment logic, such as when to display the xxx button and when to hide the xxx layout. Here, we often use conditional expressions and if judgment statements.
For example, as shown in the figure above, there is text display and a button1 on the page. I want to hide the button1 of the page and use the conditional expression:
class _MyHomePageState extends State<MyHomePage> {
bool _showButton1 = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page title"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'I'm a text description',
),
_showButton1
? RaisedButton(
onPressed: () {},
child: Text("Button1"),
)
: SizedBox()
],
),
);
}}A conditional expression is used here to determine whether to display Button1. if Button1 is not displayed, SizedBox() will be displayed. Therefore, it is obviously not the best way to display a widget. Therefore, it is better to use an if statement here
class _MyHomePageState extends State<MyHomePage> {
bool _showButton1 = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page title"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'I'm a text description',
),
if (_showButton1)
RaisedButton(
onPressed: () {},
child: Text("Button1"),
)
],
),
);
}}Extension operator (...) and List map ~ Use in layout
When writing a page in the development of fluent, some data related to the List array is often processed. For example, there is a String array, and the elements in it need to be displayed as button names. At this time, there are many ways to write, among which the more concise and clear is the combination of the extension operator and the map:
Widget _body() {
List<String> buttonNames = [
"button1",
"button2",
"button3",
"button4",
];
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'I'm a text description',
),
...?buttonNames
.map((name) => RaisedButton(
onPressed: () {},
child: Text("$name"),
))
.toList()
],
),
);
}Finally, there are many knowledge points waiting for me to practice and summarize. This article will be recorded here for the time being. See you another day!
-------- END ---------