flutter problem: how to use dynamic data in chart?

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• How to group firebase data in flutter with DateTime?

  I am making a chat application in flutter using firebase. I want to show a header with the date whenever the date changes. How can I group messages in flutter coming from firebase on the basis of date and show a header with the changed date?

  I have tried GroupedListView package but I was not able to retrieve the chatmessages successfully.
• Can you make complete apps using Flutter & Dart or just the UI part of an app?

  I'm confused about what Flutter framework actually does, I know that it uses Dart and have heard that both of them can be used to create cross-platform apps.

  But Wikipedia defines Flutter as a "UI Framework", so my question is, can you make a complete app (for mobile) which also has backend part (communicates with a database) built entirely using Flutter & Dart and not only the UI part?

  If you didn't get my question, here is an example:

  Suppose a front-end web developer works on client side programming in his job, and the backend logic is written by another backend developer.

  When it comes to mobile app development, suppose as a Flutter developer, your job is to create apps, but does that mean that as a Flutter developer, you'll only write the front-end logic and leave the backend part for another backend developer like in web world? Can Flutter developers also write the backend of an app using only Flutter & Dart? If not, then who writes the backend of a mobile app and what tools/languages/frameworks does he uses?
• Flutter - How to change color of marker based on magnitude of an int?

  I want to create markers at each GPS point with a color on a scale from white to red that corresponds to how slow or fast the GPS data indicates the speed is at that point. However, since Color.fromRGBO() requires const arguments, I'm having trouble getting the speed to change the color. How could I circumvent the Color class or find a better way to draw such a gradient than with Marker objects?
• Why aren't my apps showing anything after i added list tile

  import 'package:flutter/material.dart';
  import 'package:flutter/cupertino.dart';
  class Reservation extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      final appTitle = 'Car Reservation';
      return MaterialApp(
        title: appTitle,
        home: Scaffold(
          appBar: AppBar(
            title: Text(appTitle),
          ),
          body: MyCustomForm(),
        ),
      );
    }
  }
  // Create a Form widget.
  class MyCustomForm extends StatefulWidget {
    @override
    MyCustomFormState createState() {
      return MyCustomFormState();
    }
  }
  // Create a corresponding State class. This class holds data related to the form.
  class MyCustomFormState extends State<MyCustomForm> {
    // Create a global key that uniquely identifies the Form widget
    // and allows validation of the form.
    final _formKey = GlobalKey<FormState>();
  
    @override
    Widget build(BuildContext context) {
      // Build a Form widget using the _formKey created above.
      return Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.person),
                hintText: 'Enter your name',
                labelText: 'Name',
              ),
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.phone),
                hintText: 'Enter a phone number',
                labelText: 'Phone',
              ),
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.car_repair_outlined),
                hintText: 'Enter your car plate',
                labelText: 'Plate Number',
              ),
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.punch_clock),
                hintText: 'How many hours',
                labelText: 'Hours',
              ),
            ),
            TextFormField(
              decoration: const InputDecoration(
                icon: const Icon(Icons.space_bar),
                hintText: '',
                labelText: 'Reservation Spot create as ListTile',
              ),
            ),
            ListView(
              children: const <Widget>[
                Card(child: ListTile(title: Text('One-line ListTile'))),
                Card(
                  child: ListTile(
                    leading: FlutterLogo(),
                    title: Text('One-line with leading widget'),
                  ),
                ),
                Card(
                  child: ListTile(
                    title: Text('One-line with trailing widget'),
                    trailing: Icon(Icons.more_vert),
                  ),
                ),
                Card(
                  child: ListTile(
                    leading: FlutterLogo(),
                    title: Text('One-line with both widgets'),
                    trailing: Icon(Icons.more_vert),
                  ),
                ),
                Card(
                  child: ListTile(
                    title: Text('One-line dense ListTile'),
                    dense: true,
                  ),
                ),
                Card(
                  child: ListTile(
                    leading: FlutterLogo(size: 56.0),
                    title: Text('Two-line ListTile'),
                    subtitle: Text('Here is a second line'),
                    trailing: Icon(Icons.more_vert),
                  ),
                ),
                Card(
                  child: ListTile(
                    leading: FlutterLogo(size: 72.0),
                    title: Text('Three-line ListTile'),
                    subtitle: Text(
                        'A sufficiently long subtitle warrants three lines.'
                    ),
                    trailing: Icon(Icons.more_vert),
                    isThreeLine: true,
                  ),
                ),
              ],
            ),
            new Container(
                padding: const EdgeInsets.only(left: 40.0, top: 40.0),
                child: new RaisedButton(
                  child: const Text('Submit'),
                  onPressed: (){},
                )),
          ],
        ),
      );
    }
  }
  

  The app won't show after I add the list tile inside, can anyone tell me what went wrong?
  Here is after I add my list tile code inside

  And here's before I add the list tile code inside

  I am wondering if anyone can help me with this one. I still don't understand the flow of it, to be honest.
• How to dim the tabar like in the picture?

  I am developing a featured news app, how do I make a blur tabar like in the picture

  
• Saving Icon to Hive DB in Flutter

  Can anyone help me. How to Save Icon in hive database in flutter. And to read it.

  When I'm saving Icons it is giving error

  unhandled exception: hiveerror: cannot write, unknown type: icon.
  

  But when removing icon from hive database class and adapter it works fine.
• How do you use the new Flutter ScreenUtils with named Routes and Provider?

  Right until version 5.1.0 (which were the ones we used) the package flutter_screenutil were using a simple concept of builder which asked a "Widget Function() Builder". Which worked well on how we did it.Like so:

      return ScreenUtilInit(
          designSize: const Size(360, 760),
          minTextAdapt: true,
          splitScreenMode: true,
          builder: () => MultiProvider(
              providers: [
                ...
              ],
              child:Consumer<SettingsProvider>(
              builder: (context, settingsProvider, child) {
                return MaterialApp(
                  ...
                  initialRoute: '/',
                  routes: {
                    '/': (context) => devMode? Home(): DevHome()
  

  However, new iterations of flutter_screenutil (now on 5.5) have been asking for a builder which is a"Widget function(child) Builder"

  And they suggest this:

   //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
      return ScreenUtilInit(
        designSize: const Size(360, 690),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (child) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'First Method',
            // You can use the library anywhere in the app even in theme
            theme: ThemeData(
              primarySwatch: Colors.blue,
              textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
            ),
            home: child,
          );
        },
        child: const HomePage(title: 'First Method'),
      );
    }
  

  But they don't give instructions to make it work as intended, either on the documentation, examples, or how to use it on how to deal with both named routes or state management things like the provider, and when I tried this:

  return ScreenUtilInit(
          designSize: const Size(360, 760),
          minTextAdapt: true,
          splitScreenMode: true,
          child: devMode? Home(): DevHome()
          builder: (child) => MultiProvider(
              providers: [
                ...
              ],
              child:Consumer<SettingsProvider>(
              builder: (context, settingsProvider, child) {
                return MaterialApp(
                  ...
                  initialRoute: '/',
                  routes: {
                    '/': (context) => child!
  

  It just makes a restart of the app every time I change orientation.

  I am not sure what I am doing wrong and the documentation isn't making things easier to understand either. As it does not explain how to use this Builder and child, and the code does not make it clear for me how to use it either.

  Can someone help me understand this conundrum? We are stuck in ancient version with some serious bugs which should be fixed, But we cant upgrade cause I cant make flutter_screenutil work as intended.

  Thank you.
• How to send data through patch request in flutter

  I am facing issue in sending the below data as a patch request.

  The issue I am facing is I am not able to pass the Detail object data within another object(AddPerson) hence if you could please help me resolve this issue.

  Additionally the data is being captured correctly but the format of the data as shown in sample data is not being captured.

  Hence if you could please help in resolving this issue.

  Below is the code

  Model.dart

  class AddPerson {
    String? personId;
    String? personName;
    List<Details>? details;
  
    AddPerson(
        {this.personId, this.personName, this.details});
  
    AddPerson.fromJson(Map<String, dynamic> json) {
      personId = json['personId'];
      personName = json['personName'];
      if (json['details'] != null) {
        details = <Details>[];
        json['details'].forEach((v) {
          details!.add(new Details.fromJson(v));
        });
      }
    }
  
    Map<String, dynamic> toJson() {
      final Map<String, dynamic> data = new Map<String, dynamic>();
      data['personId'] = this.personId;
      data['personName'] = this.personName;
      if (this.details != null) {
        data['details'] = this.details!.map((v) => v.toJson()).toList();
      }
      return data;
    }
  }
  
  class Details with ChangeNotifier {
    String? type;
    String? price;
    String? notificationId;
  
    Details({this.type, this.price, this.notificationId});
  
    Details.fromJson(Map<String, dynamic> json) {
      type = json['type'];
      price = json['price'];
      notificationId = json['notification_id'];
    }
  
    Map<String, dynamic> toJson() {
      final Map<String, dynamic> data = new Map<String, dynamic>();
      data['type'] = this.type;
      data['price'] = this.price;
      data['notification_id'] = this.notificationId;
      return data;
    }
  }
  

  Provider.dart

  Future<void> updateAddPerson(
        List<AddPerson> newNotification, List<Details> s) async {
      
  
      Map<String, String> headers = {
  //   "Content-Type": "charset=utf-8",
        "Content-type": "application/json"
      };
  
      var uri = Uri.parse('http://localhost:3001/users/update/person');
  
      try {
        var request = http.MultipartRequest('PATCH', uri);
        request.headers.addAll(headers);
        
        for (int i = 0; i <= newNotification.length - 1; i++) {
          request.fields['personId[$i]'] = '${newNotification[i].personId}';
          request.fields['personName[$i]'] = '${newNotification[i].personName}';
          for (int m = 0; m <= s.length - 1; m++) {
            request.fields['notification_id[$m]'] = '${s[m].notificationId}';
            request.fields['type[$m]'] = '${s[m].type}';
            request.fields['price[$m]'] = '${s[m].price}';
          }
        }
  
        var response = await request.send();
        print(response.statusCode);
        if (response.statusCode == 201) {
          notifyListeners();
        } else {
          print('invalid data ');
        }
      } catch (error) {
        print('NA');
      }
    }
  

  Sample result

  [
          {
          "personId": "1",
          "personName":"Akash”, 
          "details": [
              {
                  "notification_id": 1,
                  "type": “SUV”,
                  "price": "200"
              },
              {
                  "notification_id": 2,
                  "type": “SUV”,
                  "price": "250"
              }
          ]
      }
      ]
  
• How can I create an animation for the bottom navigation bar in Flutter?

  I have a bottom navigation bar with some tabs and I want to animate the icons of them when I switch page, without an external package.

  And I have one more question, I added a view pager to switch pages swiping, and taping in the nav bar icons, but I got an error. For example: I am in the page 1, and I want to switch to page 3, while it is going and passes page 2, it goes back and stay in page 2.

  _onPageChanged method:

  _onPageChanged(int index) {
    setState(() {
      _pageController.animateToPage(index,
          duration: const Duration(milliseconds: 200), curve: Curves.easeInOut);
  
      _activePage = index;
    });
  }
  

  BottomNavBar(from scratch) and ViewPager:

  bottomNavigationBar: BottomNavBar(
    activeTab: _activePage,
    onTabTap: _onPageChanged,
    tabs: const [
      BottomNavBarItem(
        icon: Icon(Icons.icon_1, color: gray),
        selectedIcon: Icon(Icons.icon_1_selected, color: white)
      ),
      BottomNavBarItem(
        icon: Icon(Icons.icon_2, color: gray),
        selectedIcon: Icon(Icons.icon_2_selected, color: white)
      ),
      BottomNavBarItem(
        icon: Icon(Icons.icon_3, color: gray),
        selectedIcon: Icon(Icons.icon_3_selected, color: white)
      ),
    ],
  ),
  body: PageView(
    controller: _pageController,
    onPageChanged: _onPageChanged,
    children: _pages,
  ),
  
• How can i remove previous route if i navigate from drawer in flutter

  When I navigate from drawer to any page and return back the drawer keeps open. For example: The drawer contains two-button and if I button one and then back, then second and then back. Now if I press back button of android it will repeat all activities like in chrome. Hope you get my point. If you need to know anything else from me. let me know
• Throw Exception in Flutter Test

  I am following this tutorial for Clean Architecture in flutter

  This is my test file

  test(
          'should return server failure when call to remote data is unsuccessful',
              () async {
            // arrange
            when(mockRemoteDataSource.getConcreteNumberTrivia(any))
            .thenThrow(ServerException());
  
            // act
            final result = await repository.getConcreteNumberTrivia(tNumber);
  
            // assert
            verify(mockRemoteDataSource.getConcreteNumberTrivia(tNumber));
            verifyZeroInteractions(mockLocalDataSource); // <--- this line is failing
            expect(result, equals(Left(ServerFailure()))); // // <--- this line is failing
          },
        );
  

  This is my code

  Future<Either<Failure, NumberTrivia>> getConcreteNumberTrivia(int number) async {
      networkInfo.isConnected;
  
      try {
        final remoteTrivia = await remoteDataSource.getConcreteNumberTrivia(number);
        localDataSource.cacheNumberTrivia(remoteTrivia);
        return Right(remoteTrivia);
      } on ServerException {
        return Left(ServerFailure());
      }
    }
  

  I dont know why but coz of these 2 lines, test case is failing.

  verifyZeroInteractions(mockLocalDataSource);
  expect(result, equals(Left(ServerFailure())));
  

  I have mentioned in test case to throw a server exception using when and thenThrow but still it goes to this line localDataSource.cacheNumberTrivia(remoteTrivia);. I think this is the cause of the error but I am not quite sure.

  I did read the docs but I could not find why is this problem occuring. What am i doing wrong? I am new to TDD in flutter. Thanks in advance :)
• type 'Null' is not a subtype of type 'List<Comic>' in type cast

  I had some issue and cannot solve it when I followed Food App of EDMT Dev. I use Realtime database of Firebase to connect with my Flutter app but it returned Error "type 'Null' is not a subtype of type 'List' in type cast"

  body: FutureBuilder(
      future: viewModel.displaygetComicList(),
      builder: (context, snapshot) {
        if(snapshot.connectionState == ConnectionState.waiting)
          return Center(child: CircularProgressIndicator(),);
        else
          {
            var lst = snapshot.data as List<Comic>;
            return ListView.builder(
              itemCount: lst!=null?lst.length:0,
              itemBuilder: (context, index) {
                return Text(lst[index].category);
              }
            );
            //return Center(child: Text('Load ok'),);
  
          }
      }),
  

  Can anyone help me to solve this error? Thank you very much.
• Flutter Integration Test: How to wait until element is disappear with specific time out

  I am writing a Flutter Integration Test and I'm looking for a code which that allows the automated test to run and proceed after the Login (check step below) finishes automatically. .....

  here are the step involves

  1. Enter username and password
  2. hit login button
  3. then the loading modal will show up for 2 mins // at this step I need to find some code to make sure that the modal is disappeared so that it can proceed to the next step.

  It's just like Wait Until Element Does Not Contain in Selenium

  here is my code

    await tester.pumpAndSettle();
    await Future.delayed(const Duration(seconds: 4));
    await tester.pumpAndSettle();
    
    var textBoxForPhone = find.byKey(const Key('txtbPhone'));
    var textBoxForPass = find.byKey(const Key('txtbPass'));
    var btnLogin = find.byKey(const Key('btnLogin'));
  
    var syncMasterModal = find.byKey(const Key('syncMasterModal'));
  
  // Input Username
    await tester.enterText(textBoxForPhone, '9108717875');
  // Input Password
    await tester.enterText(textBoxForPass, '12345');
    await tester.testTextInput.receiveAction(TextInputAction.done);
    await tester.pumpAndSettle();
  // Tap Login button
    await tester.tap(btnLogin);
  
  //After tapping the login button the loading modal will appear and it takes about 2 minutes to finish this process
  // So it is at this step where I need the code to detect whether the loading modal is disappear 
    
  

  So could you guys help point me in the right direction?

  PS. This is my first time here and English is not my first language so, I'm sorry if my text here is a bit confusing.