Как нарисовать круг по нажатию кнопки

Question

Я прям совсем зеленый в flutter и не понимаю почему при нажатии кнопки не рисуется красный круг. Вот мой код:

import 'package:flutter/material.dart';

void main() {
  runApp(
      new MaterialApp(
          debugShowCheckedModeBanner: false,// скрываем надпись debug
          home: new Scaffold(
            body: new MyButton()
          )
      )
  );
}

class MyButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget Circle = new Container(
      width: 300.0,
      height: 300.0,
      decoration: new BoxDecoration(
        color: Colors.red,
        shape: BoxShape.circle,
      ),
    );

    return new Container(padding: EdgeInsets.all(40),
        child: new Row (
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget> [
              new FlatButton(onPressed: (){print(Circle);}, child: Text('Красный круг') ,color: Colors.red, textColor: Colors.white),
            ]
        ));
  }
}

Answer 1

функция print - это вывод текста в консоль. В вашем случае нужно сделать иначе. По факту ты не указываешь рисовать, а просто по условию либо вставляешь виджет в дерево виджетов, или не вставляешь.

во-первых, виджет изменяемый, значит, должен быть stateful.

во-вторых, нужна логическая переменная, которая будет знать, нужно ли рисовать круг на экране, или нет.

в-третьих, по нажатию кнопки менять состояние виджета и тогда будет отображаться ваш круг.

При этом, лучше виджеты выносить в отдельные классы, чем сохранять в локальную переменную.

А также, FlatButton уже устарел, следует использовать TextButton.

Примерно как-то так.

import 'package:flutter/material.dart';

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  bool isVisibleCircle = false;

  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      
      if (isVisibleCircle) new Circle(),
      
      TextButton(
          onPressed: () {
            setState(() {
              isVisibleCircle = true;
            });
          },
          child: Text('Красный круг')),
    ]);
  }
}

class Circle extends StatelessWidget {
  const Circle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300.0,
      height: 300.0,
      decoration: new BoxDecoration(
        color: Colors.red,
        shape: BoxShape.circle,
      ),
    );
  }
}

БЛОГ НА HUSL

Как нарисовать круг по нажатию кнопки

Ответы (1 шт):