哪个填充了Flutter中的Flood或Bucket？

Question

我是Flutter的新手。

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

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

我是Flutter的新手。我想从下面的图像中选择一个区域。如何在Flutter中实现洪水或铲斗填充？有人可以帮我解决您在Flutter Dart中的知识吗？

您可以通过使用包裹在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绘制自定义形状。

Answer 1

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