flutter app example

A simple flutter application example is very helpful for beginner mobile programmers in learning to create mobile applications with flutter. Practicing in making mobile applications with Flutter will hone your skills to become even better, so you have to keep practicing… and don’t get bored quickly. A simple Flutter app can vary depending on your creative ideas. For example, let’s create a simple app that displays a random motivational quote every time the user clicks a button.
Here is an example code for such a Flutter application:

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MotivationApp());
}

class MotivationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Motivation App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MotivationPage(),
    );
  }
}

class MotivationPage extends StatefulWidget {
  @override
  _MotivationPageState createState() => _MotivationPageState();
}

class _MotivationPageState extends State<MotivationPage> {
  List<String> quotes = [
    "The only way to do great work is to love what you do. – Steve Jobs",
    "Believe you can and you're halfway there. –Theodore Roosevelt",
    "Your time is limited, don't waste it living someone else's life. –Steve Jobs",
    // Add more quotes here...
  ];

  String currentQuote = "Tap to get motivated!";

  void generateQuote() {
    final _random = Random();
    int index = _random.nextInt(quotes.length);
    setState(() {
      currentQuote = quotes[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Motivation App'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: generateQuote,
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Text(
              currentQuote,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20.0),
            ),
          ),
        ),
      ),
    );
  }
}

The code above creates a simple Flutter app that displays one random motivational quote every time the user taps the screen.

A brief explanation of the code above:

MotivationApp is a class for setting an application theme and organizing the main page.
MotivationPage is a stateful class that displays the main view of the application. When the user taps the screen, the generateQuote function is called to display a random motivational quote.
A list of quotes is stored in the quotes variable, and each time the user taps the screen, a random quote is selected from this list.

You can add more quotes to the quotes list to make the application more varied. This is just a simple example of the wide variety of ideas that can be realized with Flutter!

If the code above is run, it will appear like the video below

That is tutorial create flutter app for beginner.

Related article : Install flutter on windows