RenderBox was not laid out: RenderConstrainedBox#358ca relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Total
1
Shares

I am creating an app which is requires to shows analogue clock at the top left.

here is my code

import 'package:analog_clock/analog_clock.dart';
import 'package:flutter/material.dart';



class MyApps extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApps> {
@override
Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.green[900],
            title: Text('CLOCK'),
        ),
        backgroundColor: Colors.green,
        body: Padding(padding: const EdgeInsets.only(top:10),
        child: AnalogClock(
            decoration: BoxDecoration(
                border: Border.all(width: 3.0, color: Colors.black),
                color: Colors.black,
                shape: BoxShape.circle),
            width: 200.0,
            isLive: true,
            hourHandColor: Colors.white,
            minuteHandColor: Colors.white,
            showSecondHand: true,
            numberColor: Colors.white,
            showNumbers: true,
            textScaleFactor: 1.5,
            showTicks: true,
            showDigitalClock: true,
            digitalClockColor: Colors.white,
            datetime: DateTime(2020, 8, 4, 9, 11, 0),
            ),
        ),
    
    )
    );
}


i want to make clock at the top left . I used padding but it wasn’t helpful
and it gives me this error

Error:

RenderBox was not laid out: RenderConstrainedBox#358ca relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'

Here is the main.dart file where i call MyApps

Main.dart


import 'package:attendance_system_app/clock.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());  //it run our flutter app

}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    // return MaterialApp(home: Text('Hello!'),);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
      ),
      home: MyApps(),
     
      
    );
  }
} 

I want clock at this position

enter image description here

Please help if someone knows.


Solution

The AnalogClock by default takes all the available space of the parents and since widget Padding doesn’t provide any constraints to it’s children, The AnalogClock will be taking up all the height and width.

Now since you have given width: 200, the AnalogClick applied a tight constraint horizontally, but still it takes the entire height of the parent. Then, since it needs to scale itself down to 1:1 ratio of height and width, it is appearing in the middle like that.

Just add height: 200, to your clock and this will be the output.

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *