I have a BloC in which I write data from another page by calling the change method. And then with the help of this BloC I display the data on another page. I have added different states to display the CircularProgressIndicator, but I've run into an error that in the UI I can't properly call these states to show the right widgets. I tried adding the code in the body but it doesn't work. Can you please tell me how to add states to the UI and show the CircularProgressIndicator when opening the page?

state

class MycarsState extends Equatable {
  final String number;
  final String type;
  final CarModel? carModel;

  const MycarsState._({
    this.number = '',
    this.type = '',
    this.carModel,
  });

  const MycarsState.initial() : this._();

  const MycarsState.loading() : this._();

  const MycarsState.loaded({required String number, required String type, required CarModel? carModel})
    : this._(number: number, type: type, carModel: carModel);
    
  @override
  List<Object> get props => [number, type];
}

cubit

class MycarsCubit extends Cubit<MycarsState> {
  MycarsCubit()
      : super(MycarsInitial(
          number: '',
          type: '',
        ));

  String number = '';
  String type = '';
  late CarModel? carModel;
  

  void clear() {
    number = '';
    type = '';
    carModel = null;
  }

  void change({
    required String numberText,
    required String typeText,
    required CarModel? carModelNew,
  }) {
    number = numberText;
    type = typeText;
    carModel = carModelNew;
    emit(MycarsInitial(
      number: number,
      type: type,
      carModel: carModel,
    ));
  }
}

body

return BlocBuilder<MycarsCubit, MycarsState >(
      builder: (context, state) {
        return state.when(
          initial: () => Container(),
          loading: () => CircularProgressIndicator(),
          loaded: (number, type) => Text('$number, $type'),
        );
      },
    );

CodePudding user response：

Here is one way of doing it. I've made some adjustments to the code. It's fully functional

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlocProvider(
        create: (context) => MycarsCubit(),
        child: const Demo(),
      ),
    );
  }
}

class Demo extends StatelessWidget {
  const Demo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<MycarsCubit, MycarsState>(
          builder: (context, state) {
            if (state.isLoading) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const CircularProgressIndicator(),
                  ElevatedButton(
                    onPressed: () => context.read<MycarsCubit>().change(numberText: '1234', typeText: 'type 123'),
                    child: const Text('Press me'),
                  )
                ],
              );
            }
            return Text('Number: ${state.number}, Type: ${state.type}');
          },
        ),
      ),
    );
  }
}

class MycarsState extends Equatable {
  final String number;
  final String type;
  final bool isLoading;

  const MycarsState._({
    this.number = '',
    this.type = '',
    this.isLoading = true,
  });

  const MycarsState.initial() : this._();
  const MycarsState.loading() : this._(isLoading: true);
  const MycarsState.loaded({required String number, required String type})
      : this._(
          number: number,
          type: type,
          isLoading: false,
        );

  @override
  List<Object> get props => [number, type];
}

class MycarsCubit extends Cubit<MycarsState> {
  MycarsCubit() : super(const MycarsState.initial());

  String number = '';
  String type = '';

  void clear() {
    number = '';
    type = '';
  }

  void change({
    required String numberText,
    required String typeText,
  }) {
    emit(const MycarsState.loading());
    number = numberText;
    type = typeText;
    emit(
      MycarsState.loaded(
        number: number,
        type: type,
      ),
    );
  }
}