在Flutter中开发自定义小部件的过程

Question

我正在学习使用Dart/Flutter开发Android应用程序，我试图了解开发应用程序的自定义小部件的一般过程。例如，如果我需要一个具有TextField，图像和复选框的小部件，我如何单独测试该小部件?

我的意思是，目前还没有应用程序可以放那个小部件，所以我怎么"执行"呢?看看这个小部件是否按预期正确布局并正常工作?

在Java Swing世界中，我只会在我的组件类中放置一个主方法。在那个main方法中，我会创建一个框架或其他东西并将那个组件添加到那个框架中。然后直接运行这个类。这样，我基本上可以微调组件，而不必担心运行实际的应用程序，也不必遍历整个应用程序流程来访问该组件并检查它的外观。

是类似的在扑动应用程序，以及?创建一个虚拟应用程序，将小部件作为唯一的"屏幕";然后执行那个虚拟应用程序?

Answer 1

有一个很棒的在线工具叫做"Dart Pad"，这里的链接应该可以让你开始基本的样板代码，这是你的应用程序的开始。

然后您可以继续创建自定义小部件，我将尝试在下面复制您的示例小部件:

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!;
},
);
},
),
],
),
);
}
}