哪一个填充了Flutter中的Flood或Bucket? [英] Which one fills the image Flood or Bucket in Flutter?

问题描述

我是Flutter的新手.

I am new in Flutter.

我想从下面的图像中选择一个区域. 如何在Flutter中实现洪水或铲斗填充?

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

有人可以帮我解决您对Flutter Dart的了解吗?.

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

推荐答案

您可以通过使用包裹在InkWell中的形状来实现此目的:

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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您可以使用 CustomPainter 绘制自定义形状

You can use CustomPainter to draw your custom shapes.

这篇关于哪一个填充了Flutter中的Flood或Bucket?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！