title: How to update a custom Stateful Widget using Floating Action Button
body: <p>I've recently started using Flutter just for fun, and I'm stuck on adding actual functionality to the code without having everything inside one class.</p>
  
  <p><em>Essentially, I'm trying to use a <code>FloatingActionButton</code> to increment the value of a <code>Text</code> Widget which stores the value of the user's level as an integer, but I don't want to have the whole app as a <code>StatefulWidget</code> because only the level is going to be updated. When the button is pressed, the value should increment by 1 and then show the new value on the screen.</em></p>
  
  <p>I have the Level <code>Text</code> Widget inside a <code>StatefulWidget</code> class along with a function to update the level by one and set the state; the <code>MaterialApp</code> inside a <code>StatelessWidget</code> class; and the main body code inside another <code>StatelessWidget</code> class.</p>
  
  <p>If this isn't the best way to do it please do let me know so I can improve for future projects, thanks.</p>
  
  <p><strong>main.dart</strong></p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  main() =&gt; runApp(Start());
  
  /// The Material App
  class Start extends StatelessWidget{ 
    @override
    Widget build(BuildContext context){
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.grey[800],
  
          appBar: AppBar(
            title: Text("Home Page"),
            backgroundColor: Colors.cyan,
            centerTitle: true,
          ),
  
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.orange,
            child: Icon(Icons.add, color: Colors.black,),
          ),
  
          body: HomePage(),
        ),
      );
    }
  }
  
  /// Main Content for the page (body)
  class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
  
          children: &lt;Widget&gt;[
  
            // removed other children so there's less code to scan through for you :)
  
            Padding(
              padding: EdgeInsets.fromLTRB(30, 0, 0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: &lt;Widget&gt;[
  
                  // Text that just says "Level"
                  Text(
                    "Level",
                    style: TextStyle(
                      color: Colors.orange,
                      fontWeight: FontWeight.bold,
                      fontSize: 32,
                    ),
                  ),
  
                  // space between text and actual level value
                  SizedBox(height: 10),
  
                  // Create new level widget
                  Level(),
                ],
              ),
            ),
          ],
        ),
      );
    }
  }
  
  /// Updating level using a Stateful Widget
  class Level extends StatefulWidget{
    @override
    State&lt;StatefulWidget&gt; createState(){
      return _LevelState();
    }
  }
  
  class _LevelState extends State&lt;Level&gt;{
    int level = 0;
  
    void incrementLevel(){
      setState(() {
        level += 1;
      });
    }
  
    @override
    Widget build(BuildContext context){
      return Text(
        "$level",
        style: TextStyle(
          color: Colors.grey[900],
          fontWeight: FontWeight.normal,
          fontSize: 28,
        ),
      );
    }
  }
  </code></pre>