DEV Community: vasanthkumar

Counter app in Flutter

vasanthkumar — Thu, 25 Apr 2024 10:55:05 +0000

Hi there,

I have the journey of learning flutter. I did learn Flutter almost 3 years back for some time but didn't work on any significant flutter project. I want to use the Github repo with a different app for each branch other than main branch.

The basic idea of counter app is to learn about stateful widget.

lib/main.dart

import 'package:flutter/material.dart';
import 'package:learning_flutter/pages/counter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Counter(),
    ) ;
  }
}

calling the counter widget in home of MaterialApp of MyApp. Create a pages folder under lib and create a file in pages with counter.dart

lib/pages/counter.dart

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {

  int _counter = 0;

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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
          const Text("You have pressed the button this many times"),
          Text(_counter.toString(),
          style: const TextStyle(fontSize: 38),
          ),
          ElevatedButton(onPressed: _incrementCounter, child: const Text("Increment"))
        ],),
      ),
    );
  }
}

create Counter class as a stateful widget. declare a variable _counter and initialise with the value zero.

int _counter = 0;

write a function to update the value of _counter by 1 when ever the function is invoked. We should wrap the update of _counter variable inside the setState function.

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

updating _counter++ directly without setState in Flutter application will not automatically update the UI with the new value of _counter. This is because Flutter's UI is declarative, meaning the Ui is a function of the current state. When the state changes, the UI needs to be updated to reflect these changes. However, without calling setState, Flutter's framework is not notified of the state changes, and thus UI is not updated.

Finally, setState notifies the Flutter Framework that the state of the widget has changed. This triggers to schedule a call to build method which updates the UI to reflect the new state.

Add an ElevatedButton to trigger the _incrementCounter when clciked.

 ElevatedButton(
onPressed: _incrementCounter,
child: const Text("Increment")
)

To see the changes value convert the _counter to string and display using Text widget

Text(_counter.toString())

Result:

I am following the Mitch Koko youtube video FULL Flutter Masterclass: Beginner to Pro for learning Flutter as of now.

Whenever I follow along the youtube video for coding I want to go one step further to learn better. So, from this Counter I want to transform it as 25 min timer.

import 'dart:async';

The idea for timer is that assign a variable with 25*60 => 25 minutes and decrement it every second after clicking play, we can pause while timer decrementing and playing again will start from where timer paused. Reset timer when ever needed.

 final _oneSecond = const Duration(seconds: 1); // one second Duration
  Timer? _timer; // timer object 
  bool _isPause = true; // toggle between pause and play.
  int _counter = 25 * 60; // 25 minutes.

start Timer function => toggle the pause option,
start the timer and decrement the _counter variable every second.
clear the time and toggle the pause option when _counter == 0

void _startTimer() {
    // toggle the pause option
    setState(() {
      _isPause = false;
    });

    _timer = Timer.periodic(
             _oneSecond, // duration
            (timer) {
      if (_counter == 0) {
        // cancel the timer and toggle the pause
        setState(() {
          _timer?.cancel();
          _isPause = true;
        });

      } else {
      // decrement the counter
        setState(() {
          _counter--;
        });
      }
    });
  }
/*The dispose method is then used to cancel the timer when the widget is removed from the tree, ensuring that the timer does not continue to run and use resources unnecessarily. */
 @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

start Timer function => toggle the pause option and cancel the timer.

void _pauseTimer() {
    setState(() {
      _timer?.cancel();
      _isPause = true;
    });
  }

reset Timer function => set the pause option to initial state, cancel the timer and set the counter to initial state.

  void _resetTimer() {
    setState(() {
      _timer?.cancel();
      _isPause = true;
      _counter = 25 * 60;
    });
  }

converting the integer _counter to minutes and seconds

"${(_counter ~/ 60).toString().padLeft(2, "0")}:${(_counter % 60).toString().padLeft(2, "0")}",

~/60 is integer division with 60 gives minutes,
%60 is modulo with 60 gives seconds.
toString() converts integer to string
padLeft(2,"0") gives consistent 2 digits => padded the string "0" until the length of the string is 2.

lib/pages/counter.dart

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

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final _oneSecond = const Duration(seconds: 1);
  Timer? _timer;
  bool _isPause = true;

  int _counter = 25 * 60; // 25 minutes.

  void _startTimer() {
    setState(() {
      _isPause = false;
    });
    _timer = Timer.periodic(_oneSecond, (timer) {
      if (_counter == 0) {
        setState(() {
          _timer?.cancel();
          _isPause = true;
        });
      } else {
        setState(() {
          _counter--;
        });
      }
    });
  }

  void _pauseTimer() {
    setState(() {
      _timer?.cancel();
      _isPause = true;
    });
  }

  void _resetTimer() {
    setState(() {
      _timer?.cancel();
      _isPause = true;
      _counter = 25 * 60;
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "${(_counter ~/ 60).toString().padLeft(2, "0")}:${(_counter % 60).toString().padLeft(2, "0")}",
              style: const TextStyle(fontSize: 38),
            ),
            ElevatedButton(
              onPressed: _isPause ? _startTimer : _pauseTimer,
              child: _isPause
                  ? const Icon(Icons.play_arrow)
                  : const Icon(Icons.pause),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _resetTimer,
        child: const Icon(Icons.restart_alt_sharp),
      ),
    );
  }
}

Thats it,
Thank you reading.
See you in the next article.

Lets Level Up.

References:
github counter/timer
FULL Flutter Masterclass: Beginner to Pro
Working with timers in flutter

Variables, types and Keywords in go

vasanthkumar — Wed, 20 Sep 2023 17:06:43 +0000

In the blog, I want to look into variables, basic types, keywords and control structures of our go language.

Variables:

The variable is a name given to a storage area that the program can manipulate. The variable is like a container and the name of the variable is like a label that shows what is inside the container. Go is a strongly, statically typed language which means variable types need to be explicitly declared and thus determined at compile time.

var a = 100
const b = "I am a String"
var isTrue = false

Here the var and const are keywords. When a variable is declared with the var keyword can change the value after the declaration. When a variable is declared with the const keyword, the value remains the same throughout the life of the program.

Notice that we are not mentioning the type of the variable in the above examples. When we declare a variable without specifying any type, The variable type is inferred from the value of the right-hand side which is known as Type inference.

we can specify the type of the variable as follows

var a int = 200
const b string = "I am Mr.B"
var isBool bool
var price int
var school string
// till now the values of isBool => false, school => "", price => 0
// later point in the programming.

isBool = true
price = 456
school = "New Bay School"

When we don't want to assign the variable value while declaring, we must mention the type of the variable. Every variable declared should be used at least once in the program, the compiler throws an error. The value of the constants should be known by compile time. The values of var can be known at run time.

package main
import("fmt")
func main(){
    a := 100
    fmt.Println(a)
}

the above line a:=100 is a shorthand notation of var a = 100 or var a int = 100. the := means the variable is declared and assigned with a right-hand side value. This shorthand representation can only be done inside a function and you cannot use := for the same variable.

Declaring Multiple Variables:

In Go, it is possible to declare multiple variables in the same line.

var a, b, c int = 1, 2, 3

var a, b = "Hello" , 3
c, d : = false , "World !"

Multiple variable declarations can be grouped.

var (
    a int
    b int = 1
    c string = "Go Gophers!"
)

DataTypes:

The data type specifies the type and size of the variable values. There are 3 basic basic types in go:

bool: represents a boolean value either true or false.

var A bool //'A' will have a false value by default.
A = true
var B = false
C := true

Numeric: represents an Integer type, floating type and complex type.

Integer: An integer is used to store a whole number without decimal points. By default integer is int which takes the appropriate size of the machine i.e., 32 bits for a 32-bit machine and 64 bits for a 64-bit machine.

There is also uint which is known as unsigned integer also follows the above rule.

We can give explicit length with int32, or uint32

The list of (signed and unsigned) integer data types => int8, int16, int32, int64, byte, uint8, uint16, uint32, uint64 with byte being the alias for uint8 .

Type	Size	Range
int	Depends on the platform.	-2147483648 to 2147483647 in 32-bit systems and
-9223372036854775808 to 9223372036854775807 in 64-bit systems
int8	8-bit	-128 to 127
int16	16-bit	-32768 to 32767
int32	32-bit	-2147483648 to 2147483647
int64	64-bit	-9223372036854775808 to 9223372036854775807
uint	Depends on the platform.	0 to 4294967295 in 32-bit systems and
0 to 18446744073709551615 in 64-bit systems
uint8	8-bit	0 to 255
uint16	16-bit	0 to 65535
uint32	32-bit	0 to 4294967295
uint64	64-bit	0 to 18446744073709551615

var x uint = 32
var a int = -32
var b uint32 = 4222222
var c int64 = -9999999999

Float: The float data type is used to store numbers with decimal points. To represent floats we need to use float32 and float64 (there is no float type

Type	Size	Range
float32	32 bits	-3.4e+38 to 3.4e+38.
float64	64 bits	-1.7e+308 to +1.7e+308.

var a float32 = 123.65
var b float32 = 3.4e+38
var c float64 = 1.7e+308

Complex: Go has native support for complex numbers. Type complex128 (64-bit real and imaginary parts) or type complex64 (32-bit real and imaginary parts).

c1 := complex(10, 11) // constructor init
c2 := 10 + 11i        // complex number init syntax

String: represents a string value.
```
s := "Hello World !"
var newString = "New World"
var nextString string = "next Go"
```
Strings in Go are a sequence of UTF-8 characters enclosed in double quotes (“). If you use the single quote (‘) you mean one character (encoded in UTF-8) — which is not a string in Go.

Keywords:

Keywords are reserved words in every language. There are 25 keywords available in the Go language. These keywords were pre-defined inside the go language library and cannot be used as identifiers inside the go program. Keywords cannot be used as variable names or constants.

`break`	`default`	`func`	`interface`	`select`
`case`	`defer`	`go`	`map`	`struct`
`chan`	`else`	`goto`	`package`	`switch`
`const`	`fallthrough`	`if`	`range`	`type`
`continue`	`for`	`import`	`return`	`var`

References:

Learning GO book

Go variables by Tutorial point

Identifiers and Keywords by coding ninjas

variables and constant in go

Difference between := and = operators in Go

Type inference in go

Data types in Go

go multiple variables

Integer data types

complex numbers

Hello World in Go

vasanthkumar — Wed, 13 Sep 2023 17:30:20 +0000

13 Sep,2023 10:42 PM

Installed Go to my Macbook with brew install go
To check whether Go is installed or not use go in the terminal and if it returns some commands that can be combined with go

Hello, World

wrote the first Hello World program in Go

package main
import 'fmt'
func main() {
     fmt.Println("Hello, World")
}

compiled the helloworld.go with go build helloworld.go which created an executable.
executed with ./helloworld
We can compile and execute with a single command go run helloworld.go which didn't create any executable file.

Variables

variables in go can be declared in the following ways

var a int
var b bool
a = 15 
b = true


var (
x int
y bool
)
x=100
y=false

m:=100
n:="New N"

var i,j int
i=1
j=2

GitHub commit link

Resources

Hello, World! in Rust

vasanthkumar — Tue, 01 Aug 2023 17:21:15 +0000

Hi devs,
Welcome to my Blog-A-Thon. I just thought of writing a blog a day, for the rest of the month. So, quick decisions. I will write whatever that comes to my mind. The idea is to develop the habit of writing, no matter how shitty the writing is!. Please bear with me.

About Today's work:

I need to connect to clients Virtual Desktop Infrastructure (VDI) for work. Usually, it doesn't work properly and will take some time to respond to our inputs. Today also falls into same category. I just worked for 3hrs(I forgot to mention, I need to be in War Room Call in MS Teams from 9 AM to 7PM) properly and remaining hours to just frustrate why VDI is slow as hell. I helped my colleagues with some code(Finally, one positive thing). I don't why but I like solving user stories of others than mine(:sick). I am stopping it there.

Rust

I am a front-end React Developer. I like writing JavaScript ( yeah , you heard it right!) but hate when I need to spend so much time messing my code and UI design with CSS ( padding, margin, display, position, font-weight, button:hover). I am longing to switch to backend from so many days. Not only backend but just be away with CSS for some time, at-least outside the work. So, I made up my mind to learn Rust,, just like that.

I am using Ubuntu OS and Rust,Cargo were installed almost a year back;

Cargo

Cargo is a package manage they say. I don't know anything completely. As I am from JavaScript world,I assumed it similar to Node Package Manager. Some say it is and I don't know what the other says and don't wanna know for now!!

I am following and may follow this Rust book to learn Rust initially.

Hello, World!

I created the new Rust project withcargo new project. It created project folder with Cargo.toml and src/main.rs .

and inside src/main.rs, there is already something written inside it. It is

fn main() {
    println!("Hello, world!");
}

I opened the src/rust.rs file and closed it again. I didn't any line of code to it. I ran cargo run. It compiled and logged Hello, world! on the terminal. So, my rust code is just running cargo commands instead of anything. Yeah, I liked it. Need to see weather I will like it or hate it.

I started following the second chapter Guessing Game, will write about it tomorrow. Its already 10:47PM now, need to wake up early!!!

I want to code a TO DO app by the end of this week with rust.

Aug 1, 2023
10:50 PM
Visakhapatnam
Vasanth Kumar Cheepurupalli

My First Official Open Source Contribution

vasanthkumar — Fri, 11 Nov 2022 18:11:57 +0000

Hi there,

Yesterday, I visited dev.to to write some article and browse some articles and found "around 700 people contributed to forem" and I clicked on it which took me to the github page of forem which powers dev.to.

I found it interesting and went through some issues and found out that there is a bug with badge description rendering twice in dev.to

Today(11/11/2022), I forked the repo into my GitHub account and clone it into my local. At first I found it scary with so many configuration files but thanks to developer docs which helped me installing dependencies to start the application in my local.

I am using Ubuntu operating system, I started installing the dependencies with the help of Developer docs. I installed rbenv , Ruby 3.0.2 , PostgreSQL, ImageMagick, Redis. After installing all these, I started running scripts for application to load. But, those scripts were failing. I debugged for some time and found out that I need to give DATABASE_URL with username and password in .env file.

Finally, I successfully managed to run the application in my localhost.

Now, I need to find the code location for the badge description. After several searches, I found the file name and the code relate to it which has two descriptions, So I remove one, committed and pushed my code.I created the pull request and it got accepted by today itself.

The final result, now badge is showing description.

I am so happy, I know this is just a small contribution but I liked it. I want to do it again.

Thank you.

Let's Start the Journey for better job

vasanthkumar — Thu, 10 Nov 2022 18:01:43 +0000

Hi Everyone,
This is Vasanth Kumar Cheepurupalli from India. I was graduated in June 2021 with Computer Science and Engineering Bachelor's Degree.

I started working in a IT company based on Hyderabad(India) since August 2021. I was trained as a Full Stack MERN developer during Aug 15 - Sep 15 and got into React Project for the next 6 months. And by April 2022 I was into another React Project which will end in few days(Nov 29, 2022).

Its been a good year in terms of work but things were starting monotonous. It is like same day but developing different UI screen.

Now, I want to apply for different remote jobs which will pay better(current salary is $500-$600/month). But the problem is I feel like "I am not the candidate to apply for that job" (insecure feeling). And I don't have a strong DSA skills (Leetcode) or Git-hub profile. (I didn't even a portfolio website)

During August 2021, my plan is to equip myself with better skills and be in a better job after a year(because I signed a bond to work at least for a year). But it didn't happened. And you guessed it right, that goal moved a year ahead. So, now it is same goal => Equip new skills, be a better programmer, land in a better job.

To do that I want to go public and have my journey documented through blogging.

Let's rock it guys.

PS: I do love my current job as it is my first. Just upset with myself for not upgrading.

Seven Languages In Seven Weeks

vasanthkumar — Mon, 17 Jan 2022 17:30:10 +0000

Seven Languages in Seven Weeks

A Pragmatic Guide to Learning

Programming Languages

--Bruce A. Tate

Hi, all. I am a Computer Science Engineer, graduated from a Tier-3 college in India. In our curriculum, we have C in 1st semester as introductory programming language to make us familiar with basic programming concepts.Later C++ and Java for object oriented concepts. In 5th Semester, we have to develop a web application using JavaScript, HTML, CSS as front-end and PHP as backend. And the final semester machine learning project credit card fraud detection using Auto-encoders with Python.

So, total programming languages I think I know are

C
C++
Java
JavaScript
PHP
Python

But in sad reality, I only know C language and remaining is just a C code with some ctrl+C ,ctrl+V from Google.It is very easy to transform from one language to another as they all have common C type syntax.

So, I have decided to try different paradigms of programming languages. As a result I ended with the book Seven Languages in Seven Weeks by Bruce A. Tate. My plan is to have fun with new language and blog my progress and also to build at-least one production level project (code) in that language.

Forward

The forward for this book was given by Joe Armstrong, creator of Erlang.

Learning a new programming language is like learning to swim for the first time.

The first step in acquiring any new skill is not being able to do your own thing but being able to reproduce what other people have done before you. This is the quickest way to mastering a skill.

To grow confidence, he wants the learners to reproduce the examples in the book (point noted).

programming is about understanding, and understanding is about ideas.

1.1Method to the Madness

we need to deep dive into the language if we want to get the true flavour of the language which cannot be attained with short tutorial video.
The author promises to give us deep, fast dive experiences for seven different times.

we can find the answers for

What is the typing model? (strong or weak, static or dynamic)
What is the programming model? (object-oriented (OO), func- tional, procedural, or some type of hybrid)
How will you interact with it? (compiled or inter- preted, require Virtual Machines or not)
What are the decision constructs and core data structures?
What are the core features that make the language unique?

1.2 The Languages

The Seven languages we are going to learn in seven weeks are

Ruby
Io
Prolog
Scala
Erlang
Clojure
Haskell

check out the video from code report

DefaultTextStyle in FLutter

vasanthkumar — Mon, 12 Jul 2021 07:28:13 +0000

If you want to have a default Text Style down the tree.we can use the DefaultTextStyle. All you need to do is to mention the style and wrap the child around DefaultTextStyle.
The text style to apply to descendant Text widgets which don't have an explicit style.

style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),

DecoratedBox | DecoratedBoxTransistion in Flutter

vasanthkumar — Thu, 08 Jul 2021 10:33:06 +0000

A widget that paints a Decoration either before or after its child paints.

Container insets its child by the widths of the borders; DecoratedBox does not.

DecoratedBox is commonly used with BoxDecoration.
you can watch the video at

DecoratedBox({Key? key, required Decoration decoration, DecorationPosition position, Widget? child})

DecoratedBox(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            center: Alignment(-0.5, -0.6),
            radius: 0.15,
            colors: <Color>[
              Color(0xFFEEEEEE),
              Color(0xFF111133),
            ],
            stops: <double>[0.9, 1.0],
          ),
        ),
        position: DecorationPosition.background,
        child: FlutterLogo(size: 400));

position determines whether the decoration should be at foreground or background to the child.
The above decoration created a full moon with dark night background of FlutterLogo()

DecoratedBoxTransistion

Declare it in a statefulwidget and declare the DecorationTween.

final DecorationTween decorationTween = DecorationTween(
      begin: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Color(0xFFEEEEEE),
            Color(0xFF111133),
          ],
          stops: <double>[0.9, 1.0],
        ),
      ),
      end: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Colors.orange,
            Colors.cyan,
          ],
          stops: <double>[0.9, 1.0],
        ),
      ));

Declare and intialize AnimationController

  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 5))
          ..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

finally return DecorationBoxTransistion

child: DecoratedBoxTransition(
          position: DecorationPosition.background,
          decoration: decorationTween.animate(_controller),
          child: Container(
              width: 800,
              height: 1000,
              padding: EdgeInsets.all(10),
              child: Container()),),

Date Picker in Flutter without plugins

vasanthkumar — Mon, 31 May 2021 08:13:35 +0000

Have you ever want to take Date input in flutter. Don't worry, Flutter has widget for it.

watch it on youtube:

we need to have a stateful class because we tend to change the value of the date every time the user select it. And a DateTime variable to store the date value.

DateTime _dateTime;

initialize the _datetime

  @override
  void initState() {
    super.initState();
    _dateTime = DateTime.now();
  }

I used Column and then listtile to show the date in text format(string) and to choose date onTap() on Listtile()


Column(children: [
        ListTile(
          title: Text("Date: " + _dateTime.toString(),
              style: TextStyle(fontWeight: FontWeight.bold)),
          onTap: _pickTime,
        )
      ])

Now, all we need is to define _picktime(){}. As we need to pick date is a future , we will have to use async and await.

showDatePicker() is the widget which returns DateTime() selected and has 4 required fields

required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,

assign the returned value of showDatePicker to a variable.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );

  }

now using setstate() update the _datetime variable.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );
    if (d != null) {
      setState(() {
        _dateTime = d;
      });
    }
 }

several optional values are there like
helpText, label displayed at the top of the dialog.
cancelText, label on the cancel button.
confirmText, label on the ok button.
which take string values

      cancelText: "CANCEL TEXT",
      helpText: "HELP TEXT",
      confirmText: "CONFIRM TEXT",

An optional initialEntryMode argument can be used to display the date picker in the DatePickerEntryMode.calendar (a calendar month grid) or DatePickerEntryMode.input (a text input field) mode. It defaults to DatePickerEntryMode.calendar and must be non-null.

initialEntryMode: DatePickerEntryMode.input,

An optional textDirection argument can be used to set the text direction (TextDirection.ltr or TextDirection.rtl) for the date picker

textDirection: TextDirection.rtl,

An optional initialDatePickerMode argument can be used to have the calendar date picker initially appear in the DatePickerMode.year or DatePickerMode.day mode. It defaults to DatePickerMode.day, and must be non-null.

initialDatePickerMode: DatePickerMode.day,

The builder parameter can be used to wrap the dialog widget to add inherited widgets like Theme.

 builder: (context, child) {
        return Theme(
            data: ThemeData(
                primarySwatch: Colors.purple,
                primaryColor: Colors.purple,
                accentColor: Colors.purpleAccent),
            child: child);
      },

An optional selectableDayPredicate function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate returns true for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true for initialDate.

selectableDayPredicate: (DateTime q) {
        return q.weekday == 6 || q.weekday == 7 ? false : true;
      },

you can play with codepen

DataTable in Flutter

vasanthkumar — Thu, 29 Apr 2021 05:57:13 +0000

Do you ever want show data in table format to your App users in your mobile application.Now, it is easier with Flutter Widget DataTable()

Watch on youtube:
DataTable will take DataColumn() list for table header and Datarow() list for table rows. And each DataRow will take the DataCell().

Example DataTable:

DataTable(columns: [
    DataColumn(
      label: Text("Name"),
    ),
    DataColumn(
      label: Text("Age"),
    ),
    DataColumn(
      label: Text("Year"),
    ),
  ], rows: [

    DataRow(cells: [
      DataCell(Text("Varun")),
      DataCell(Text("22")),
      DataCell(Text("1999")),
    ]),
    DataRow(cells: [
      DataCell(Text("Alexa")),
      DataCell(Text("23")),
      DataCell(Text("1998")),
    ]),
    DataRow(cells: [
      DataCell(Text("Arjun")),
      DataCell(Text("21")),
      DataCell(Text("2000")),
    ]),
  ]);

Anything that goes into a DataCell and DataColumn is a widget.Hence we can show anything in the table.
for eg: adding FlutterLogo() to DataColumn and all DataRows gives

 DataRow(cells: [
      DataCell(Text("Arjun")),
      DataCell(Text("21")),
      DataCell(Text("2000")),
      DataCell(FlutterLogo()),
    ]),

we can give option to edit the cell data to the user with onTap() function and we can indicate with showEditIcon:true

 DataCell(
        Text("21"),
        showEditIcon: true,
        onTap: () {},
      ),

we can also show data using map;
consider the data:

 var data = <Data>[
    Data("varun", "20", "2001"),
    Data("varun1", "21", "2000"),
    Data("varun2", "23", "1998"),
    Data("varun3", "26", "1995"),
  ];

then

DataTable(
    columns: [
      DataColumn(
        label: Text("Name"),
      ),
      DataColumn(
        label: Text("Age"),
      ),
      DataColumn(
        label: Text("Year"),
      ),
      DataColumn(label: FlutterLogo())
    ],
    rows: data.map((data) {
      return DataRow(cells: [
        DataCell(Text(data.name)),
        DataCell(Text(data.age)),
        DataCell(Text(data.year)),
        DataCell(FlutterLogo())
      ]);
    }).toList(),
  );

gives the output of

you can play with it codepen

Color Cycle in ReactJs

vasanthkumar — Thu, 04 Feb 2021 06:13:05 +0000

app idea

Youtube Speed Code

The basic idea is to increment the value of hexadecimal color for every .25sec .
Hexadecimal color consists of RGB:(red,green,blue each ranging from 00 to FF).
so, the complete Hex code has 6 letters.

defining the state:


   const [state,setState]=useState({
       red:"00",
       blue:"00",
       green:"00",
       start:"Start"

   });

start is to check whether the animation started or not.

form for taking input and to submit:

 <form onSubmit={handleSubmit} >
           <center > 
            <input placeholder="Red"  value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            </center>
            <center> 
            <button type="submit" name="Submit" value={state.start}>{state.start}</button>
            </center> 
            </form>

handleInput to update the values of red , green ,blue:


const handleInput=e=>{
       const value=e.target.value;

       setState({
           ...state,
          [e.target.name]:value
       });

       console.log(value)
   }

On Submit , we need to check whether the given input is valid hex or not and alert the user

function isHex(x){
   if(x.length!==2)return 1;
   var re=/[0-9A-Fa-f]{2}/g;
   if(re.test(x))
   return 0;
   return 1;
}
......

......

const handleSubmit=e=>{
       e.preventDefault();
       if(state.start==="Start")setState({
        ...state,
       start:"Stop"
    });
    else setState({
        ...state,
       start:"Start"
    });
       var msg="";
     if(isHex(state.red))
     {
         msg+="Red should be between 00 and FF\n";
     }
     if(isHex(state.blue))
     {
         msg+="Blue should be between 00 and FF\n";
     }
     if(isHex(state.green))
     {
         msg+="Green should be between 00 and FF\n";
     }
     if(msg.length!==0)
     {
         alert(msg)
     }

   }

setInterval of .25sec to update the rgb and change the background.

useEffect(()=>{
    var intervalId;
    if(state.start==="Stop")
    {
       intervalId=setInterval(()=>{
         var hex= state.red+state.green+state.blue;
         var dec=hextodec(hex);
         const red=dec.substring(0,2);
         const green=dec.substring(2,4);
         const blue=dec.substring(4)
         setState({
             ...state,
            red:red,
            green:green,
            blue:blue
         });
       },25) 
    }

     return ()=>clearInterval(intervalId);

   },[state])
.....
.....
.....

function hextodec(x)
{

    var n=parseInt(x,16);
    n+=1;

    return n.toString(16).padStart(6,'0');
}

style={{backgroundColor:`#${state.red+state.green+state.blue}`}}

the final App.js is


import React ,{useState,useEffect}from 'react'
import './App.css'
export default function App() {

   const [state,setState]=useState({
       red:"00",
       blue:"00",
       green:"00",
       start:"Start"

   });
   useEffect(()=>{
    var intervalId;
    if(state.start==="Stop")
    {
       intervalId=setInterval(()=>{
         var hex= state.red+state.green+state.blue;
         var dec=hextodec(hex);
         const red=dec.substring(0,2);
         const green=dec.substring(2,4);
         const blue=dec.substring(4)
         setState({
             ...state,
            red:red,
            green:green,
            blue:blue
         });
       },25) 
    }

     return ()=>clearInterval(intervalId);

   },[state])
   const handleInput=e=>{
       const value=e.target.value;

       setState({
           ...state,
          [e.target.name]:value
       });

       console.log(value)
   }
   const handleSubmit=e=>{
       e.preventDefault();
       if(state.start==="Start")setState({
        ...state,
       start:"Stop"
    });
    else setState({
        ...state,
       start:"Start"
    });
       var msg="";
     if(isHex(state.red))
     {
         msg+="Red should be between 00 and FF\n";
     }
     if(isHex(state.blue))
     {
         msg+="Blue should be between 00 and FF\n";
     }
     if(isHex(state.green))
     {
         msg+="Green should be between 00 and FF\n";
     }
     if(msg.length!==0)
     {
         alert(msg)
     }
     else{




     }  
   }
    return (
        <div style={{backgroundColor:`#${state.red+state.green+state.blue}`,height:"100vh",width:"100vw"}}>
             <div style={{backgroundColor:state.start==="Stop"?'white':'grey'}}>
            <center><h1 style={{backgroundColor:'white'}}>COLOR CYCLE</h1></center>

           <form onSubmit={handleSubmit} >
           <center > 
            <input placeholder="Red"  value={state.red} name="red" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Green" value={state.green} name="green" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            <input placeholder="Blue" value={state.blue} name="blue" onChange={handleInput} disabled={state.start==="Stop"?true:false}/>
            </center>
            <center> 
            <button type="submit" name="Submit" value={state.start}>{state.start}</button>
            </center> 
            </form>
            </div>
        </div>
    )
} 
function isHex(x){
   if(x.length!==2)return 1;
   var re=/[0-9A-Fa-f]{2}/g;
   if(re.test(x))
   return 0;
   return 1;
}
function hextodec(x)
{

    var n=parseInt(x,16);
    n+=1;

    return n.toString(16).padStart(6,'0');
}

Thank you