How to "Set Value..." when debugging with Flutter in Android Studio

Question

Problem

The following image and code are the defaults when creating Flutter App with "New Flutter Project".

  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 Demo Home Page'),
      );
    }
  }

  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++; // <- I set a breakpoint

      });
    }

    @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.
      );
    }
  }

I attempted to "Set Value..." by putting a break point in the code where _counter is incremented when debugging with this code, but can not be pressed even if I hover the cursor.

①　"Debug 'main.dart' (^D)" ②　Breakpoint ③　"Set Value..."

Question

• How to "Set Value..." when debugging with Flutter in Android Studio.

Development Environment

• Android Studio 3.1.4
• Flutter 0.5.1
• Dart 2
• Android SDK built for x86

Best regards,

Solution

While the execution halts on a breakpoint, setState has no effect. setState doesn't directly cause to rerender, it just marks the widget as required for rerender.

The next time the sync signal comes from the display, Flutter rebuilds the stale parts of the view.

Comments

[RyosukeOK]

In this case, where should I place a breakpoint, which variable can be "Set Value ..."?

[Günter Zöchbauer]

You can call setValue, what variable you update doesn't really matter, but you would need to continue execution to see the effect of setValue

[RyosukeOK]

I can not press the "Set Value ..." button.

[Jack]

@GünterZöchbauer Is there any way where we can write array [0], array[1] or any run time assignment in the debugger ?

[Günter Zöchbauer]

Sure, you can do that, but as mentioned, it doesn't cause UI re-render. setState() needs to be called to invalidate the view and then Flutter needs to render again, but it can't because the execution is halted at the breakpoint.

[konstantin_doncov]

This is not an answer to the "How to...?". We still can't change variables at the runtime. Case which described in the question is specific. I want to change the var in the bloc or repository, or even in the widget before render, but I can't.