Flutter Some Basic Concept Understand Through the This App || Programmer Hubs|| Programmer Rohit Sharma

ROHIT SHARMA 09 April

"in this article you will learn best thing  some important like if you want touch or icon touch or button  tap in any android application build through the flutter language or technology so you will follow these point in this article."

First thing in the flutter you create a project and learn some basic concept:-

  •  Gesture Detector
  •  Random Number Generation
  •  Switch Case Statement Understanding
  •  Assets  Uses

One thing is about gesture Detection if you have any widget touch any app the performs an action called gesture detection.

Gesture Detection Contains Some Property like that:-

A Child that contains all type of Widget and more & more operation/function/method

like that:- onTap(), OnLongPress(),ontapDown(),onTopUp() etc.

so here use the this code for change the image value or Image Change.


GestureDetector(
              child: Image(
                image: diceimage,
                width: 100,
                height: 100,
              ),
              onTap: () => diceroller(),
            ),


And the main/changedice Method is Describe here this use switch case statement:-


 void diceroller() {
    AssetImage newimage;
    var randomnum = (1 + Random().nextInt(6));
    switch (randomnum) {
      case 1:
        newimage = one;
        break;
      case 2:
        newimage = two;
        break;
      case 3:
        newimage = three;
        break;
      case 4:
        newimage = four;
        break;
      case 5:
        newimage = five;
        break;
      case 6:
        newimage = six;
        break;
    }
    setState(() {
      diceimage = newimage;
    });
  }


Random Number Generation Method:-

use a library that is math


import 'dart:math';

and Random Number method:-


var randomnum = (1 + Random().nextInt(6));

Random Number Return Value min Zero(0) to max 5 So that reason use 1+ 

How to access predefined images and other data like that:


assets:
  - images/one.png
  - images/two.png
  - images/three.png
  - images/four.png
  - images/five.png
  - images/six.png


 AssetImage one = new AssetImage("images/one.png");
  AssetImage two = new AssetImage("images/two.png");
  AssetImage three = new AssetImage("images/three.png");
  AssetImage four = new AssetImage("images/four.png");
  AssetImage five = new AssetImage("images/five.png");
  AssetImage six = new AssetImage("images/six.png");
  AssetImage diceimage;
  void initState() {
    super.initState();
    setState(() {
      diceimage = two;
    });
  }

Final Code Here:-


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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  AssetImage one = new AssetImage("images/one.png");
  AssetImage two = new AssetImage("images/two.png");
  AssetImage three = new AssetImage("images/three.png");
  AssetImage four = new AssetImage("images/four.png");
  AssetImage five = new AssetImage("images/five.png");
  AssetImage six = new AssetImage("images/six.png");
  AssetImage diceimage;
  void initState() {
    super.initState();
    setState(() {
      diceimage = two;
    });
  }

  void diceroller() {
    AssetImage newimage;
    var randomnum = (1 + Random().nextInt(6));
    switch (randomnum) {
      case 1:
        newimage = one;
        break;
      case 2:
        newimage = two;
        break;
      case 3:
        newimage = three;
        break;
      case 4:
        newimage = four;
        break;
      case 5:
        newimage = five;
        break;
      case 6:
        newimage = six;
        break;
    }
    setState(() {
      diceimage = newimage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice Roller"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              child: Image(
                image: diceimage,
                width: 100,
                height: 100,
              ),
              onTap: () => diceroller(),
            ),
            //https://programmerhubs.in
          ],
        ),
      ),
    );
  }
}





Video lecture on that application so you can follow or watch it.




                                                                    Thank You!!!!!


Tags:

Post a Comment

1 Comments

thanks for your suggestion and improving quality of the content