Home > Software design >  Smooth Page Indicator
Smooth Page Indicator

Time:05-09

Even though I added the Smooth Page Indicator, it doesn't show up in the emulator. I am also getting a few debug errors. e.g. 'package:flutter/src/rendering/object.dart': Failed assertion: line 1785 pos 12: '!_debugDoingThisLayout': is not true.

RenderBox was not laid out: RenderFlex#1ac32 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

RenderBox was not laid out: RenderViewport#9012c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

and, I can't switch between pages. How can I solve the problem?

import 'package:deneme/modul2.dart';
import 'package:deneme/modul3.dart';
import 'package:deneme/modul4.dart';
import 'package:deneme/modul5.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class Modul1 extends StatelessWidget {
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image.asset("images/modül1.png"),
            SizedBox(
            height: 100,
            child: PageView(
            controller: _controller,
            children: [
              Modul1(),
              const Modul2(),
              const Modul3(),
              const Modul4(),
              const Modul5(),
               ],
              ),
            ),
            SmoothPageIndicator(
              controller: _controller,
                count: 5,
              axisDirection: Axis.vertical,
              effect: SlideEffect(
                  activeDotColor: Colors.white54,
                  dotHeight: 10,
                  dotColor: Colors.white,
                  dotWidth: 10,
                ),
            ),
          ],
        ),
      );
  }
}

CodePudding user response:

I didn't had this error when I test it, but I made some changes:

  1. I've changed the dots color because it was white on a white background which makes them invisible.
  2. add Expanded instead of SizedBox for testing purposes.
  3. made axisDirection horizontal in SmoothPageIndicator.
  4. Replaced the Models with Text because missing classes.

And this was the result(Idk why it got stretched): result

Try this example on separate file and test it and tell me what the result you had.

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

class TestPage extends StatelessWidget {
  TestPage({Key? key}) : super(key: key);
  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Image.asset("images/modül1.png"),
            Expanded(
              child: PageView(
                controller: _controller,
                children: const [
                  Center(
                    child: Text('Page 1'),
                  ),
                  Center(
                    child: Text('Page 2'),
                  ),
                  Center(
                    child: Text('Page 3'),
                  ),
                  Center(
                    child: Text('Page 4'),
                  ),
                  Center(
                    child: Text('Page 5'),
                  ),
                ],
              ),
            ),
            SmoothPageIndicator(
              controller: _controller,
              count: 5,
              axisDirection: Axis.horizontal,
              effect: const SlideEffect(
                activeDotColor: Colors.white54,
                dotHeight: 10,
                dotColor: Colors.blue,
                dotWidth: 10,
              ),
            ),
            const SizedBox(height: 50),
          ],
        ),
      ),
    );
  }
}
  • Related