2

Existe alguma forma de um StatelessWidget ter ou simular um controle de estado?

Par não ficar sem contexto, vamos tomar como base o exemplo padrão do flutter:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Hello World'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Utilizando somente StatelessWidget como ficaria?

2 Respostas 2

3

Sou novo no Flutter mas acredito que, sem o auxílio de uma biblioteca externa, ou sem usar um Statefull Widget seja impossível de se ter este tipo de comportamento com um Stateless widget. O próprio nome já diz, ele é "Sem estado", uma vez que é feito o build, seu filhos são imutáveis e caso você faça alguma alteração, você precisa refazer todo o build do Widget novamente. Caso exista a necessidade de fazer um gerenciamento de estado em um Widget, você tem duas opções (ao meu ver):

  1. Usar um Statefull Widget
  2. Usar um gerenciador de estados, no caso uma biblioteca externa. Estou começando a trabalhar com o MobX, e ele é muito bom, dado que você pode por exemplo declarar o seu Stateless widget como um Observável, e dada um acerta ação, o gerenciador de estados automaticamente faz o rebuild do Widget, passando as novas informações dadas. Caso se interesse, este é o link da biblioteca: https://pub.dev/packages/mobx

Se alguém ai souber outra forma seria interessante, mas acredito que se tratando de estados estes são os dois caminhos mesmo.

0

Realmente não há como StatelessWidget puro alterar seu estado.

Existe alguma forma de um StatelessWidget ter ou simular um controle de estado?

"Simular" não é bem a palavra correta, digamos que mitigar seria o termo mais apropriado, isso é possível através do StatefulBuilder

Como o próprio nome diz StatefulBuilder
Creates a widget that both has state and delegates its build to a callback.
Cria um widget que seu state e build são delegados para um callback

É um "Construtor" de StatefulWidget, então quando adicionado a um StatelessWidget o que framework faz? Veja no trecho do código fonte do flutter:

class StatefulBuilder extends StatefulWidget {
  const StatefulBuilder({
    Key key,
    @required this.builder,
  })  : assert(builder != null),
        super(key: key);

  final StatefulWidgetBuilder builder;

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

class _StatefulBuilderState extends State<StatefulBuilder> {
  @override
  Widget build(BuildContext context) => widget.builder(context, setState);
}

Exatamente o que você pensou, "por traz dos panos" ele cria um StatefulWidget, nesse caso StatefulWidgetBuilder é o callback responsável por "rebuildar" StatefulBuilder sempre que o estado mudar.

Utilizando somente StatelessWidget como ficaria?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Sem Statefull-3'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    int _counter = 0;
    return Container(child:
        StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
      return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _counter++;
            });
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
    }));
  }
}

Veja funcionando no DartPad

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .