What meaning "<Widget>[~]" in dart? arrow brackets with list brackets(flutter)

Question

i am newbie in dart.

i am studying flutter by reading docs.

in here

i see [blah blah].

i know generic (Cpp) but, i dont know meaning it.

could you explain it to me?

Answer 1

I'm new to dart as well, by playing around on DartPad.
It seems that putting a type (ie Int, String) before a Set {'hello', 'world'} or
a List ['hello', 'world'] will make it like , making it type safe. ，使其类型安全。 (ref: https://dart.dev/guides/language/type-system )

Like if you do <String>['hello', 'world'] only string will be accepted on the list,
and will throw an error if you do <String>[1,2,3] .

So in <Widget>[Column(), Rows()] if you put non-widget class or object in the set it will throw an error like if you do <Widget>['hello', 'world'] .

Try the code below on DartPad https://dartpad.dev/215ba63265350c02dfbd586dfd30b8c3?null_safety=true . Note that it will throw an error since I put a string on Widget type Set on line 3.

import 'package:flutter/material.dart';

void main() {
  
  print(<String>['Hello',' ', 'World']);
  
  print(<Widget>[Column(), 'hello']); //error will throw since it will only accept <Widget>
  
  print(<Widget>[Column(),Row()]);
  
}

Also, all those items inside the List are Widgets class and inside those ei "height: 36.0" are widget properties/methods, it's like nested Widgets, Flutter are full of them.

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: Container( // Container is a widget, child is a GestureDetector props.
        height: 36.0, //height is a Container props
        padding: const EdgeInsets.all(8.0), // EdgeInsets also a widget
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: BoxDecoration( // BoxDecoration also a widget
          borderRadius: BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: Center(
          child: Text('Engage'),
        ),
      ),
    );
  }
}