Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Drawing a rectangle in bottom

Tags:

flutter

dart

I'm trying to draw a rectangle at the bottom only the Rect object Rect.fromLTRB is not drawing.

I do not know if I'm interpreting the Rect object in the wrong way or I'm writing the drawRect object erroneously.

Could you help me draw a rectangle in the bottom?

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            top: 0.0,
            child: new CustomPaint(
              painter: new Sky(),
            )
          ),
        ]
      )
    );
  }
}

class Sky extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(
        0.0, 100.0, 0.0, 0.0
      ),
      new Paint()..color = new Color(0xFF0099FF),
    );
  }

  @override
  bool shouldRepaint(Sky oldDelegate) {
    return false;
  }
}
like image 361
rafaelcb21 Avatar asked Aug 14 '17 23:08

rafaelcb21


2 Answers

Your left and right is the same (0.0) so it draws an empty rect. Also the coordinates start on top, so bottom should be > top; Try this

new Rect.fromLTRB( 0.0, 0.0, 20.0, 100.0 )

like image 103
mzimmermann Avatar answered Sep 20 '22 09:09

mzimmermann


Follows the code in which the rectangle is in the bottom of screen:

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    final double _height = logicalSize.height;
    double _rectHeight = 50.0;
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Positioned(
            bottom: 0.0,
            left: 0.0,
            top: _height - _rectHeight,
            right: 0.0,
            child: new CustomPaint(
              painter: new Sky(_width, _rectHeight),
              child: new Text('$_width'),
            )
          ),
        ]
      )
    );
  }
}

class Sky extends CustomPainter {
  final double _width;
  final double _rectHeight;
  Sky(this._width, this._rectHeight);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(
        0.0, 0.0, this._width, _rectHeight
      ),
      new Paint()..color = new Color(0xFF0099FF),
    );
  }

  @override
  bool shouldRepaint(Sky oldDelegate) {
    return false;
  }
}
like image 25
rafaelcb21 Avatar answered Sep 19 '22 09:09

rafaelcb21