Which one fills the image Flood or Bucket in Flutter?

问题

I am new in Flutter.

I want to select a zone from the below images. How can I achieve the flood or bucket fill in Flutter?

Can someone help me out with your Knowledge in Flutter Dart..??

回答1:

You can do this by using shapes wrapped in an InkWell :

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

  MyApp({Key key,}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp>{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key,}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage>{

  List<bool> selectionStatus = List(4);

  @override
  void initState() {
    selectionStatus = List<bool>.generate(4, (i) => false) ;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demonstration')),
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 10.0,
            left: 10.0,
            child: InkWell(
              onTap: (){
                setState(() {
                  selectionStatus[0] = !selectionStatus[0] ;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all( width: 2.0),
                    color: selectionStatus[0] ? Colors.green : Colors.transparent
                ),
                child: SizedBox(
                    width: MediaQuery.of(context).size.width/2 - 15,
                    height: MediaQuery.of(context).size.width/2 - 15),
              ),
            ),
          ),
          Positioned(
            top: 10.0,
            left: MediaQuery.of(context).size.width/2,
            child: InkWell(
              onTap: (){
                setState(() {
                  selectionStatus[1] = !selectionStatus[1] ;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all( width: 2.0),
                    color: selectionStatus[1] ? Colors.red : Colors.transparent
                ),
                child: SizedBox(
                    width: MediaQuery.of(context).size.width/2 - 15,
                    height: MediaQuery.of(context).size.width/2 - 15),
              ),
            ),
          ),
          Positioned(
            top: MediaQuery.of(context).size.width/2,
            left: 10.0,
            child: InkWell(
              onTap: (){
                setState(() {
                  selectionStatus[2] = !selectionStatus[2];
                });
              },
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all( width: 2.0),
                    color: selectionStatus[2] ? Colors.yellow : Colors.transparent
                ),
                child: SizedBox(
                    width: MediaQuery.of(context).size.width/2 - 15,
                    height: MediaQuery.of(context).size.width/2 - 15),
              ),
            ),
          ),
          Positioned(
            top: MediaQuery.of(context).size.width/2,
            left: MediaQuery.of(context).size.width/2,
            child: InkWell(
              onTap: (){
                setState(() {
                  selectionStatus[3] = !selectionStatus[3];
                });
              },
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all( width: 2.0),
                    color: selectionStatus[3] ? Colors.blue : Colors.transparent
                ),
                child: SizedBox(
                    width: MediaQuery.of(context).size.width/2 - 15,
                    height: MediaQuery.of(context).size.width/2 - 15),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

You can use CustomPainter to draw your custom shapes.

来源：https://stackoverflow.com/questions/57736173/which-one-fills-the-image-flood-or-bucket-in-flutter