TOP(About this memo)) > 一覧(Flutter) > 主なウィジェット
Widgetクラスは@immutableになっている
@immutable
abstract class Widget extends DiagnosticableTree {
//...
}
したがってconstコンストラクタではない場合はアナライザによって警告が表示される。
class A extends StatelessWidget {
A({super.key, this.a = true});
bool a;
@override
Widget build(BuildContext c) {
return const Text("a");
}
}
// This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: A.adartmust_be_immutable
Container(
height: double.infinity,
decoration: const BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.6),
),
child: const Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoActivityIndicator(radius: 30.0, color: Colors.black)
],
),
)
Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.6),
),
child: const Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoActivityIndicator(radius: 30.0, color: Colors.black)
],
),
)
Center getCenterlingColumn(List<Widget> children, [double padding = 32.0]) {
return Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: padding),
child: Column(
mainAxisSize: MainAxisSize.min,
children: children,
),
),
);
}
Stack
Container
...
Align// Expandedでラップしたとしても変わらない。
alignment: Alignment.bottomRight
child: ...
@override
Widget build(BuildContext context) {
return SizedBox(
width: 800,
height: 400,
child: Stack(
children: [
FlutterLogo(size: 120),
Center(child: FlutterLogo(size: 10)),
Positioned(bottom: 0.0, left: 0.0, child: FlutterLogo(size: 30)),
Positioned(bottom: 100.0, right: 0.0, child: FlutterLogo(size: 60)),
Positioned(top: 100.0, left: 50.0, child: FlutterLogo(size: 90)),
],
),);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const FlutterLogo(size: 100),
Transform(transform: Matrix4.identity()..rotateY(pi/8)..translate(250, 0, 0)..scale(1.2, 2.5, 1.0), child: const FlutterLogo(size: 100),),
Transform.translate(
offset: const Offset(100.0, 20.0),
child: Transform.scale(
scale: 1.3,
child: const FlutterLogo(size: 100),
)),
Transform.rotate(angle: pi, child: const FlutterLogo(size: 100))
],
));
}
ConstrainedBox(
constraints: BoxConstraints.tight(const Size(200.0, 150.0)),
//constraints: const BoxConstraints.expand(),
child: const ColoredBox(color: Colors.red),
)
This dialog widget does not have any opinion about the contents of the dialog. Rather than using this widget directly, consider using AlertDialog or SimpleDialog, which implement specific kinds of Material Design dialogs.
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(
SnackBar(
content: Text("message"),
duration: const Duration(milliseconds: 4000),
),
);
FlutterError (The showSnackBar() method cannot be called during build.
〜〜)
final GlobalKey<ScaffoldState> rootScaffoldKey = GlobalKey<ScaffoldState>();
WidgetsBinding.instance.addPostFrameCallback((_) {
ScaffoldMessenger.of(rootScaffoldKey.currentContext!)
..showSnackBar(
//...
);
});
//...
Widget build(BuildContext context) {
return Scaffold(
key: rootScaffoldKey,
//...
);
}
//...
There is a Material 3 version of this component, DropdownMenu that is preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3). The DropdownMenu widget’s visuals are a little bit different, see the Material 3 spec at m3.material.io/components/menus/guidelines for more details.
Icon(Icons.notifications)Avoid using elevated buttons on already-elevated content such as dialogs or cards.
ElevatedButton(
// サイズ指定: minimumSize, fixedSize, maximumSize,
style: ElevatedButton.styleFrom(
fixedSize: Size(getMediaQueryWidth(), double.infinity),
//...
),
// 円形
// style: ElevatedButton.styleFrom(shape: const CircleBorder()),
)
const assetImage = AssetImage('assets/Dash.png');
final 1pixeldot = MemoryImage(base64Decode("R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="));
testWidgets(i.toString(), (widgetTester) async {
await widgetTester.pumpWidget(MaterialApp(
home: Scaffold(
body: Center(
child: CircleAvatar(
radius: 100,
//backgroundImage: 1pixeldot,
backgroundImage: assetImage,
),
),
)));
});
Organizes up to 3 lines of text, and optional leading and trailing icons, into a row. Less configurable than Row, but easier to use
PageView(
children: [
KeepAliveItem(child: ChildWidget()),
const RoomRequestScreen(),
],
),
class KeepAliveItem extends StatefulWidget {
const KeepAliveItem({super.key, required this.child});
final Widget child;
@override
State<KeepAliveItem> createState() => _KeepAliveItemState();
}
class _KeepAliveItemState extends State<KeepAliveItem>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return widget.child;
}
}
//...
/// The height of the toolbar component of the [AppBar].
const double kToolbarHeight = 56.0;
/// The height of the bottom navigation bar.
const double kBottomNavigationBarHeight = 56.0;
/// The height of a tab bar containing text.
const double kTextTabBarHeight = kMinInteractiveDimension;
//...