Flutter Tutorials

Flutter app development tutorials


flutter – Ink and InkWell example

main.dart


import 'package:flutter/material.dart';

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

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.cyan),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("Flutter - Ink and InkWell")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Center(
      child: Material(
          type: MaterialType.transparency,
          color: Colors.amber,
          child: Ink(
            width: 250,
            height: 250,
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                    color: Colors.black87,
                    width: 5,
                    style: BorderStyle.solid
                ),
                color: Colors.red
            ),
            child: InkWell(
              borderRadius: BorderRadius.circular(1000),
              onTap: (){
                // do something here
                setState(() {
                  counter++;
                });
              },
              child: Center(
                child: Text(
                  "$counter",
                  style: const TextStyle(
                      fontSize: 60,
                      fontWeight: FontWeight.bold,
                      color: Colors.white70
                  ),
                ),
              ),
            ),
          )
      ),
    );
  }
}

More flutter tutorials



About Me

Flutter Developer

Design a site like this with WordPress.com
Get started