InkWell es el widget de material en flutter. Responde a la acción táctil realizada por el usuario. Inkwell responderá cuando el usuario haga clic en el botón. Hay tantos gestos como tocar dos veces, presionar prolongadamente, tocar hacia abajo, etc. A continuación se encuentran las tantas propiedades de este widget. Podemos establecer el radio del widget del tintero usando el radio y también el radio del borde usando borderRadius. Podemos dar el color de salpicadura usando splashColor y podemos hacer muchas cosas.
Constructor de la clase InkWell:
InkWell({Key key,
Widget child,
GestureTapCallback onTap,
GestureTapCallback onDoubleTap,
GestureLongPressCallback onLongPress,
GestureTapDownCallback onTapDown,
GestureTapCancelCallback onTapCancel,
ValueChanged<bool> onHighlightChanged,
ValueChanged<bool> onHover,
MouseCursor mouseCursor,
Color focusColor,
Color hoverColor,
Color highlightColor,
MaterialStateProperty<Color> overlayColor,
Color splashColor,
InteractiveInkFeatureFactory splashFactory,
double radius,
BorderRadius borderRadius,
ShapeBorder customBorder,
bool enableFeedback: true,
bool excludeFromSemantics: false,
FocusNode focusNode,
bool canRequestFocus: true,
ValueChanged<bool> onFocusChange,
bool autofocus: false})
Ejemplo:
dardo principal
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'InkWell',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String inkwell='';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('InkWell Widget'),
backgroundColor: Colors.green,
actions: <Widget>[
Text(
'GFG',
textScaleFactor: 3,
)
],
),
backgroundColor: Colors.lightBlue[50],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () {
setState(() {
inkwell='Inkwell Tapped';
});
},
onLongPress: () {
setState(() {
inkwell='InkWell Long Pressed';
});
},
child: Container(
color: Colors.green,
width: 120,
height: 70,
child: Center(
child: Text(
'Inkwell',
textScaleFactor: 2,
style: TextStyle(fontWeight: FontWeight.bold),
))),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(inkwell,textScaleFactor: 2,),
)
],
),
),
);
}
}
Explicación:
- Cree un Contenedor y envuélvalo con el widget InkWell .
- Cuando se toca InkWell , se mostrará «InkWell Tapped» en la pantalla.
- Cuando InkWell está presionado durante mucho tiempo , mostrará » InkWell Long Pressed» en la pantalla.
Producción:
Cuando no se toca el contenedor de InkWell, resultará:
Cuando se toca el Contenedor InkWell, resultará:
Cuando el contenedor InkWell se presiona durante mucho tiempo, dará como resultado:
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA