preface

The last time I wrote about Flutter was in July. Now that Flutter 2.5 is out, the website has a new look.

So, don’t wait to learn. Start writing down some common dart syntax during flutter development.

On the Dart

Dart is a client programming language optimized for building rapid applications across the platform, with the following benefits:

  • Build for UI: Optimize development using languages that are optimized for the creation of user interfaces

  • R&d productivity boost: Make repeated changes, then use hot reloading in a running application to see your changes immediately

  • Run fast across all platforms: compile to ARM & X64 binaries on mobile, desktop, and backend, or compile Javascript for Web platforms

The dart syntax used in Flutter development is described in the following sections, and then how to quickly and easily implement some of the Flutter functions. Dart is a necessary language for Flutter development, but you can learn more about the Dart language at Dart: dart.cn/

Common methods for List arrays

Arrays are the most common collection type in almost all programming languages, and arrays in Dart are represented by List objects. Next, run these common methods using the DART tool: dartpad.cn

  • Define a fixed length array
void main() {  var list = List(2);  print('$list'); // [null, null]}
Copy the code
  • Define an array of mixed types
void main() { var list = List<dynamic>(); List.add (' I am text '); List. Add (0.66); print(list); // [I am text, 0.66]}Copy the code
  • Gets the first element of the array
void main() { 
 var list = [1, 2, 2, 3, 4, 5, 6, 6]; 
 print(list.first); // 1
}
Copy the code
  • Gets the last element of the array
void main() { 
 var list = [1, 2, 2, 3, 4, 5, 6, 6]; 
 print(list.last); // 6
}
Copy the code
  • Get the reversed 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)}Copy the code
  • Batch add -addall or extend operator (…) And null-aware extension operators (… ?).
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]}Copy the code

Or using the extension operator, 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]}Copy the code
  • Check if there are any elements in the array that satisfy the condition – any
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.any((v) => v > 3)); Print (list.any((v) => v > 7)); print(list.any((v) => v > 7)); // false }Copy the code
  • Check whether all elements of the array satisfy the condition – every
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.every((v) => v > 0)); Print (list.every((v) => v > 5)); // false }Copy the code
  • Gets the element – where that satisfies the condition
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.where((v) => v > 3).tolist ()); //[4, 5, 6, 6]}Copy the code
  • Gets the first element that satisfies the condition – firstWhere
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.firstWhere((v) => v > 3)); List.firstwhere ((v) => v > 6, orElse: () {print(888); }); }Copy the code

Get the last element that satisfies the condition – lastWhere (same as firstWhere, difference between first and last)

  • Gets the index – indexWhere of the first element that meets the criteria, starting at the specified location
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.indexWhere((v) => v > 3)); print(list.indexWhere(v) => v > 3); Print (list.indexWhere((v) => v > 4, 3)); print(list.indexWhere(v) => v > 4, 3)); Print (list.indexWhere((v) => v > 6, 3)) print(list.indexWhere(v) => v > 6, 3)); / / 1}Copy the code

Get the index of the last element that meets the criteria (flashback query) – lastIndexWhere (same as indexWhere, the difference between the first and last element)

  • Gets the indexOf the specified value, starting at the specified location
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.indexof (5, 6)); print(list.indexof (5, 6)); // -1 print(list.indexOf(5)); / / 5}Copy the code

Retrieves the indexOf the specified value, starting at the specified position, in reverse order – lastIndexOf

  • Concatenate the array with the specified character into the string -join
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Print (list.join(',')); print(list.join(',')); / / 1,2,2,3,4,5,6,6}Copy the code
  • 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}}Copy the code
  • 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");
  });
}
Copy the code
  • Returns -map based on the specified condition
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; Var v = list.map((e) {return e + 1; }).toList(); print(v); //[2, 3, 3, 4, 5, 6, 7, 7]}Copy the code
  • Accumulator – reduce
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; // Loop each return value as value. Var count = list.reduce((value, element) {print('value: $value - element: $element'); 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 }Copy the code
  • Sort – sort
void main() { var list = [1, 2, 2, 3, 4, 5, 6, 6]; List. Sort ((a, b) {return b - a; }); print(list); //[6, 6, 5, 4, 3, 2, 2, 1]}Copy the code

Conditional expression andiF statement ~ used in layout

When flutter is developed to write pages, it often deals with some judgment logic, such as when to display the XXX button and when to hide the XXX layout. Conditional expressions and if judgments are commonly used here.

For example, as shown above, I now have text on the page and a button1. I want to hide button1 from the page, using a 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 am a Text description ',), _showButton1? RaisedButton(onPressed: () {}, child: Text("Button1"),) : SizedBox() ], ), ); }}Copy the code

If Button1 is not displayed, SizedBox() is displayed, so displaying a widget anyway is not the best way to write it, so it would be better to use an if statement instead

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 am a Text description ',), if (_showButton1) RaisedButton(onPressed: () {}, child: Text("Button1"),)],); }}Copy the code

** Extension operators (…) With the List map * *~ used in layout

When flutter is developed to write pages, it is common to deal with List arrays of data. For example, there are now String arrays of elements that need to be displayed as button names. There are many ways to write flutter.

Widget _body() { List<String> buttonNames = [ "button1", "button2", "button3", "button4", ]; return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text(' I am a Text description ',),...? Buttonnames.map ((name) => RaisedButton(onPressed: () {}, child: Text("$name"), )) .toList() ], ), ); }Copy the code

Finally, there are a lot of knowledge points waiting for me to practice and summarize. This article is recorded here and I will see you later!

                              --------  END  ---------
Copy the code