keys1

keys1.dart

import 'dart:math';

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PositionedTiles(),
    );
  }
}

class PositionedTiles extends StatefulWidget {
  @override
  _PositionedTilesState createState() => _PositionedTilesState();
}

class _PositionedTilesState extends State<PositionedTiles> {
  List<Widget> tiles;

  @override
  void initState() {
    super.initState();
    // tiles = [
    //   StatelessColorfulTile(),
    //   StatelessColorfulTile(),
    // ];
    tiles = [
      StatefulColorfulTileNoState(),
      StatefulColorfulTileNoState(),
    ];
    // tiles = [
    //   StatefulColorfulTile(),
    //   StatefulColorfulTile(),
    // ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Row(children: tiles)),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.sentiment_very_satisfied),
        onPressed: swapTiles,
      ),
    );
  }

  swapTiles() {
    setState(() {
      tiles.insert(1, tiles.removeAt(0));
    });
  }
}

Color randColor() {
  int a = Random().nextInt(255);
  int r = Random().nextInt(255);
  int g = Random().nextInt(255);
  int b = Random().nextInt(255);
  return Color.fromARGB(a, r, g, b);
}

/// key가 필요함
/// state!
class StatefulColorfulTile extends StatefulWidget {
  @override
  _StatefulColorfulTileState createState() => _StatefulColorfulTileState();
}

class _StatefulColorfulTileState extends State<StatefulColorfulTile> {
  /// state가 있음
  var color;

  @override
  void initState() {
    super.initState();
    color = randColor();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: color,
      ),
    );
  }
}

/// stateful
/// state에 변수가 없으므로 (변수가 widget에만 있기때문에)
/// key가 필요없다.
class StatefulColorfulTileNoState extends StatefulWidget {
  Color color = randColor();

  @override
  _StatefulColorfulTileNoStateState createState() =>
      _StatefulColorfulTileNoStateState();
}

class _StatefulColorfulTileNoStateState
    extends State<StatefulColorfulTileNoState> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: widget.color,
      ),
    );
  }
}

/// stateless
/// key 가 필요없다.
class StatelessColorfulTile extends StatelessWidget {
  Color color = randColor();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: color,
      ),
    );
  }
}