Adding Interaction and Functionality to Your First Flutter App

Tiempo de lectura: 2 minutos

Reading Time: 2 minutes

Once you have the basic structure of your application in place, you can start adding additional interaction and functionality using events and states.

Events are actions that occur in your application, such as when a user taps a button or enters text in a text box. You can handle these events in Flutter by assigning a “handler” function to each event.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyScreen(),
    ),
  );
}

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            print('Button pressed!');
          },
          child: Text('Press'),
        ),
      ),
    );
  }
}

In this example, we have added a button to our screen and assigned an event handler function to the onPressed event. When the user presses the button, this function will be called, and “Button pressed!” will be printed to the console.

States are values that change in your application and can affect the appearance or behavior of your user interface. To manage states in Flutter, you can use a widget called StatefulWidget.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyScreen(),
    ),
  );
}

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pressed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

We have created a state variable called _counter that keeps track of how many times the button has been pressed. Each time the button is pressed, the _incrementCounter function is called, which increases the value of _counter by one and calls setState to indicate that the state has changed and the user interface needs to be updated.

Flutter provides a wide range of widgets that you can use to build your user interface, including buttons, text boxes, images, and much more.

In addition to the user interface, you can also add additional functionality to your application using Flutter packages. There are a plethora of packages available in the Flutter community that allow you to do things like accessing the camera, storing data in the cloud, and much more.

I hope this tutorial has helped you understand how Flutter works and how you can start developing mobile applications with it.

If you have any questions or need more information, feel free to ask.