I am learning Android app development using Dart/Flutter and I am trying to understand the general process of developing a custom widget for an app. For example, if I need a widget that has a TextField, an Image, and a checkbox, how do I test that widget individually?

I mean, there is no app to put that widget in as of now, so how do I "execute" it to see if that widget is getting laid out correctly and working properly as expected?

In the Java Swing world, I would just put a main method in my component class. In that main method, I would create a frame or something and add that component to that frame. Then run that class directly. That way, I can basically fine tune the component without worrying about running the actual application, and without having to go through the whole app flow to reach that component and check how it looks.

Is it similar in Flutter app as well? Create a dummy app with the widget as the only "screen" and then execute that dummy app?

CodePudding user response：

There is an excellent online tool called "Dart Pad", the link here should get you started on basic boilerplate code that is the beginnings of your app.

You can then proceed to create a custom widget, I'll try and replicate your example widget below:

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    Color getColor(Set<MaterialState> states) {
      const Set<MaterialState> interactiveStates = <MaterialState>{
        MaterialState.pressed,
        MaterialState.hovered,
        MaterialState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
      }
      return Colors.red;
    }

    return Container(
      child: Column(
        children: [
          Image.network("https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"),
          TextField(decoration: InputDecoration(hintText: "Type something")),
          Checkbox(
            checkColor: Colors.white,
            fillColor: MaterialStateProperty.resolveWith(getColor),
            value: isChecked,
            onChanged: (bool? value) {
              setState(
                () {
                  isChecked = value!;
                },
              );
            },
          ),
        ],
      ),
    );
  }
}