What Flutter UI tree widgets do you know?

StatelessWidget and StatefulWidget.

StatelessWidget has no mutable state. Its configuration is determined by constructor parameters.

StatefulWidget has mutable state that can change during the widget's lifecycle. It is managed by a pair of widgets: the immutable StatefulWidget itself and the mutable State.

Here are examples of other widgets:

Layout:

• Padding
• Center
• Column
• Row
• Stack
• Expanded
• Flexible

Text and images:

• Text
• Image
• Icon

Buttons:

• RaisedButton (deprecated, use ElevatedButton)
• FlatButton (deprecated, use TextButton)
• OutlineButton (deprecated, use OutlinedButton)
• IconButton
• FloatingActionButton

Lists and scrolling:

• ListView
• GridView
• SingleChildScrollView

Others:

• Container
• Scaffold
• AppBar
• SizedBox

Example of using StatelessWidget:

// Simple StatelessWidget displaying text
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

Example of using StatefulWidget:

// StatefulWidget with changing state
class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0; // Widget state

  void _incrementCounter() {
    setState(() { // Update state and redraw
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '$_counter', // Display current state
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // Call method to change state
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}