InkWell Widget in Flutter

Properties

 

  • child
  • onTap
  • onDoubleTap
  • onLongPress
  • onTapDown
  • onTapCancel
  • onHighlightChanged
  • onHover
  • focusColor
  • hoverColor
  • highlightColor
  • splashColor
  • splashFactory
  • radius
  • borderRadius
  • customBorder
  • enableFeedback
  • excludeFromSemantics
  • focusNode
  • canRequestFocus
  • onFocusChange
  • autofocus

 

Example 1:

 

import 'package:flutter/material.dart';


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


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        body: Center(

          child: InkWell(

            onTap: () {},

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

        ),

      ),

    );

  }

}

 

Example 2:

 

InkWell(

            onTapDown: (TapDownDetails details) {

              print('object');

            },

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

 

Example 3:

 

InkWell(

            onTap: () {},

            splashColor: Colors.brown,

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

 

Example 4:

 

InkWell(

            onTap: () {},

            splashColor: Colors.brown,

            highlightColor: Colors.blue,

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

 

Example 5:

 

InkWell(

            onTap: () {},

            splashColor: Colors.brown,

            highlightColor: Colors.blue,

            radius: 10,

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

 

Example 6:

 

InkWell(

            onTap: () {},

            splashColor: Colors.brown,

            highlightColor: Colors.blue,

            borderRadius: BorderRadius.all(Radius.circular (59)),

            child: Container(

              height: 200,

              width: 200,

              color: Colors.red,

              child: const Center(

                child: Text(

                  "Button",

                  style: TextStyle(fontSize: 30),

                ),

              ),

            ),

          ),

 

Video Link:

 

State and State Management in Flutter

Stateful Widget Lifecycle and Stateless Widgets

VerticalDivider widget in Flutter

Divider widget in Flutter

A Complete Dart Roadmap | Learn Dart

Post a Comment (0)
Previous Post Next Post