如何在flutter中绘制彩色背景网格？ [已关闭]

Question

我正在创建一个应用程序，我想做一个像这张图片一样的背景：

我怎样才能用最简单的方法做到这一点？

Answer 1

这是我绘制网格线的简单方法

  _drawGridLines({double space = 30, Color color = Colors.red, Widget child}) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        double width = constraints.maxWidth;
        double height = constraints.maxHeight;
        var h = Container(width: 2, height: height, color: color);
        var v = Container(width: width, height: 2, color: color);
        return Stack(children: <Widget>[
          ...List.generate((width / space).round(), (index) => Positioned(left: index * space, child: h)),
          ...List.generate((height / space).round(), (index) => Positioned(top: index * space, child: v)),
          if(child != null) child,
        ]);
      },
    );
  }

用法

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(body: _drawGridLines()),
    );
  }
}

Answer 2

它使用自定义绘画

例如

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    getHttp();
//
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CustomPaint(
        painter: BacgroundPaint(),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class BacgroundPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final height = size.height;
    final width = size.width;
    final paint = Paint();

    Path mainBackground = Path();
    mainBackground.addRect(Rect.fromLTRB(0, 0, width, height));
    paint.color = Colors.teal;

    final heightLine = height ~/ 20; // your Horizontal line
    final widthLine = (width ~/ 10); // your Vertical line

    for(int i = 1 ; i < height ; i++){
      if(i % heightLine == 0){
         Path linePath = Path();
         linePath.addRect(Rect.fromLTRB(0, i.toDouble(), width, (i+2).toDouble()));
         canvas.drawPath(linePath, paint);
      }
    }
    for(int i = 1 ; i < width ; i++){
      if(i % widthLine == 0){
        Path linePath = Path();
        linePath.addRect(Rect.fromLTRB(i.toDouble(), 0 , (i+2).toDouble(), height));
        canvas.drawPath(linePath, paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

Answer 3

您可以通过在材料应用程序中创建一个容器来完成此操作，如下所示：

Widget build(BuildContext context) {
return MaterialApp(
  home: Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("path/image.format"), fit: BoxFit.cover)),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      
      ),
    ),
  ),
);
}

无论您在此布局上绘制什么，都应该具有透明的背景颜色，否则它将不可见。希望它有效！