CODEWITHSUNDEEP
flutter
DarkMath
DarkMath

Reputation: 1409

Flutter CircularprogressIndicator is'nt displayed correctly

I have a CircularProgressIndicator defined like this:

const corpLoading = CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color> (corpColorPrimary),
);

But when I used this in a FutureBuilder, it is'nt rendered correctly (see picture below pls). It's kind of ... cutted. CircularProgressIndicator is'nt displayed correctly

My Code:

class ScreenTextViewer extends StatelessWidget {
  final String _title;
  final String _text;
  final String _resourceFileToLoad;

  ScreenTextViewer({
    @required String title,
    String text,
    String resourceFileToLoad,
    Key key
  }) :  assert(title != null && title != "" && ((text != null && text != "") || (resourceFileToLoad != null && resourceFileToLoad != ""))),
        _title = title,
        _text = text,
        _resourceFileToLoad = resourceFileToLoad,
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("$_title"),
      ),
      body: Center(
        child: Scrollbar (
          child: SingleChildScrollView(
            child: _text == null
                ? FutureBuilder<String>(
                    future: rootBundle.loadString(_resourceFileToLoad),
                    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                      // return corpLoading; // same error here
                      if (snapshot.connectionState != ConnectionState.done) {
                        return corpLoading;
                      }
                      if (snapshot.hasError) {
                        return Text('Error: ${snapshot.error}');
                      }
                      if (!snapshot.hasData){
                        return const Text('Error: Nothing to show');
                      }
                      // here is all good
                      return RichText(
                          text: TextSpan(
                            text: snapshot.data.toString(), // text: "$snapshot.data",
                            style: DefaultTextStyle.of(context).style,
                          ),
                        );
                    })
                : RichText(
                    text: TextSpan(
                      text: "$_text",
                      style: DefaultTextStyle.of(context).style,
                    ),
                  ),
          ),
        ),
      ),
    );
  }
}

What is the problem here and how can I fix this? I never run into a problem like this before...

Upvotes: 0

Views: 55

Answers (2)

Vofch
Vofch

Reputation: 448

You can try to wrap your CircularProgressIndicator with a container with a fixed size. or adding a padding to it

Upvotes: 0

Chung
Chung

Reputation: 165

I think you should only use SingleChildScrollView in usecase snapshot.hasData

Upvotes: 2

Related Questions