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


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 {
_MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApps> {
Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
        appBar: AppBar(
            title: Text('CLOCK'),
        body: Padding(padding: const EdgeInsets.only(top:10),
        child: AnalogClock(
            decoration: BoxDecoration(
                border: Border.all(width: 3.0, color:,
            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


RenderBox was not laid out: RenderConstrainedBox#358ca relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Failed assertion: line 1940 pos 12: 'hasSize'

Here is the main.dart file where i call MyApps


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 {
  State<StatefulWidget> createState() {
    return MyAppState();

class MyAppState extends State<MyApp> {
  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.


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 *