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

Question

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

Please help if someone knows.

Hi There. Your code seems incomplete. Where are you using your `MyApps` widget ? — Nisanth Reddy, May 21 '21 at 11:15
Yes, could you update your question with that code as well. Since the code you have provided works perfectly by itself. — Nisanth Reddy, May 21 '21 at 11:31
@NisanthReddy i update the questions, could u please check it now — TimeToCode, May 21 '21 at 11:45
Hi, I have posted an answer explaining why it is happening, check it out. — Nisanth Reddy, May 21 '21 at 12:04

score 1 · Accepted Answer · answered May 21 '21 at 12:04

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.

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

1 Answers1