Alternate colors in list

nsio-alternate-colors.dart

// NonstopIO Interview
//
//
//
//
//
// OBJECTIVE: Display the list of words using the NsCard widget,
// where the color of the card will initially be red and green
// alternately. On clicking the refresh button, all the red
// cards should become green and vice versa.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'NonstopIO Interview'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> words = [
    "Alpha",
    "Beta",
    "Cat",
    "Doremon",
    "Elephant",
    "Fantom",
    "Goal",
    "Helina",
    "India",
    "Jem",
    "Kite",
    "Local",
    "Machine",
    "Note",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: null, // show list of words using the card component
      floatingActionButton: const FloatingActionButton(
        onPressed: null, // create a function to toggle the colors
        tooltip: 'Toggle',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

class NsCard extends StatelessWidget {
  final Color color;
  final String word;
  const NsCard({required this.color, required this.word});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: 50,
      width: 50,
      child: Text(word)
    );
  }
}