Flutter: navigating only part of screen

2022-05-04 10:51 John imported from Stackoverflow

So I have a Row and two containers; first for selection of page and second for navigating to that selected page. I pass a string value to the 2nd container for identification which page should I navigate towards.

2 answers

answered 2022-05-04 12:13 Mohamed Amin

use NavigationRail

example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.selected,
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('First'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text('Third'),
              ),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Center(
              child: Text('selectedIndex: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}

answered 2022-05-05 01:47 B. Mercan

here is the simple solution, you can add page or widget to list then add setstate and index of widget to button onPressed function. when you pressed to button its gonna show the page

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  final screen = [
    const Center(child: Text('Home')),
    const Center(child: Text('Search')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            width: 200,
            color: Colors.red,
            child: Column(
              children: [
                IconButton(
                    onPressed: () {
                      setState(() {
                        _selectedIndex = 0;
                      });
                    },
                    icon: Icon(Icons.home)),
                IconButton(
                    onPressed: () {
                      setState(() {
                        _selectedIndex = 1;
                      });
                    },
                    icon: Icon(Icons.search)),
              ],
            ),
          ),
          screen[_selectedIndex]
        ],
      ),
    );
  }
}

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?

How to navigate to next ListView item in flutter

I want to navigate to the next item on a Listview.

I tried implementing the solution in this post but it doesn't work for me.

I created a function nextLesson() to implement the logic of moving to the next item and referenced the function in the onPressed parameter of the button.

What am I missing?

Here is my code.

class LessonDetailScreen extends StatefulWidget {
  static const routeName = '/lesson-detail';
  Lesson? currrentLesson;
  LessonDetailScreen({this.currrentLesson});

  @override
  State<LessonDetailScreen> createState() => _LessonDetailScreenState();
}

class _LessonDetailScreenState extends State<LessonDetailScreen> {

  @override
  Widget build(BuildContext context) {
    final lessonId = ModalRoute.of(context)!.settings.arguments as String;
    var loadedLesson = Provider.of<Lesson>(context).findById(lessonId);

    void nextLesson() {
      setState(() {
        int currentIndex = loadedLesson.lessons.indexOf(loadedLesson);
        if(currentIndex >= loadedLesson.lessons.length || loadedLesson.lessons.isEmpty) return;
        var nextLesson = loadedLesson.lessons[currentIndex + 1];
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (ctx) => LessonDetailScreen(
              currrentLesson: nextLesson,
            ),
          ),
        );
      });
    }

    return TextButton.icon(
              label: Text(
                'Next Lesson',
                style: TextStyle(fontSize: 20),
              ),
              style: ButtonStyle(),
              onPressed: nextLesson,
              icon: Icon(
                Icons.arrow_forward,
                size: 50,
                color: Colors.green,
              ),
            );
  }
}

toBundle.toPutInt() method of NavArgs is not working

So, in Android's Navigation, when we want to pass parameters from a FragmentA to a FragmentB, we have two ways to receive this parameter, via Bundle, in FragmentB:

val args: FragmentBArgs by navArgs()

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val tv: TextView = view.findViewById(R.id.textViewAmount)
    val amount = args.amount
    tv.text = amount.toString()
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val tv: TextView = view.findViewById(R.id.textViewAmount)
    val amount = arguments?.getSerializable(KEY_AMOUNT) as Int
    tv.text = amount.toString()
}

Both, I normally get the value. But if I try to change this value directly in the Bundle, the two behave differently. Example:

val args: FragmentBArgs by navArgs()

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val tv: TextView = view.findViewById(R.id.textViewAmount)
    var amount = args.amount
    tv.text = amount.toString()
    //Trying to change the value to -1
    args.toBundle().putInt(KEY_AMOUNT, -1)
    amount = args.amount
    //The value of amount remains the same, it is not changed to -1
}

In the code below:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val tv: TextView = view.findViewById(R.id.textViewAmount)
    val amount = arguments?.getSerializable(KEY_AMOUNT) as Int
    tv.text = amount.toString()
    //Trying to change the value to -1
    arguments?.putInt(KEY_AMOUNT, -1)
    amount = args.amount
    //The value of amount is changed and becomes -1
}

They are two different codes, with the same objective. Which should have the same results, but only the last one has the expected result, using arguments?.

The question is because the code using NavArgs from Navigation, does not update the information to -1, even though I request it through the code: args.toBundle().putInt(KEY_AMOUNT, -1)

Redirect to 404 page if url is incorrect or if a 404 error is got from BE
I need to redirect to a custom page in case if the entered URl does not exist or in case if I receive a 404 error from BE. To catch the BE error I do a navigation in the Interceptor to the /error page, but how I should proceed with the incorrect URL?

This is what I did:
```
  <IntlProvider translations={translations} locale={locale}>
      <Router>
        <Switch>
          <Route path="/error" component={CustomErrorPage} />
          <Route exact path="*" component={CustomErrorPage} />
          <PrivateRoute path="/" component={Main} />
        </Switch>
      </Router>
    </IntlProvider>
```
PrivateRoute checks if the user is logged in. If anybody has an advice it will be nice. Thanks in advance!
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
Flutter Navigator Observer get path of old and new route

I am trying to call an function, if the Router changes the first part of a Route. I do use a NavigatorObserver and know about the functions didPop/didPush.

I have the Routes like: "/page1", "/page2", "/page1/subpage1", "/page1/subpage2", "/page2/subpage1", "/page2/subpage1/subsubpage1".

When the the Router changes I want to know if I changed the page, regardless of the sub page. The functions give the old and new route a Route objects. But I can't figure out how to check these for the bottom route. I only managed to access the name of the page and to check if the Route is a first in the path. but that doen't help.

Does someone here know how I could get the complete path from the Route object or how else I could get it?

Flutter: Error says - Could not find a generator for route RouteSettings while trying to navigate to another screen

Although questions with such error messages exist in this site, none solves my problem. I have a button and on clicking the button, I just need to go to a different screen. But when ever I tap on the screen, the error shows up.

I first setup a route in MaterialApp and then tried to navigate to that route on tapping the button. The full code and the error message are given below:

Code:

import 'livesession1to1.dart';


class NavigationService {
  static GlobalKey<NavigatorState> navigatorKey =
  GlobalKey<NavigatorState>();
}



Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: CountDownTimer(),
    navigatorKey: NavigationService.navigatorKey, // set property// Added by me later from prev project
    // initialRoute: "/",

    routes: <String, WidgetBuilder> {
      '/liveSession1to1': (context) =>LiveSession1to1(),
    },
  )
  );
}// end of main

class CountDownTimer extends StatefulWidget {
  const CountDownTimer();

  final String? title='';

  @override
  _CountDownTimerState createState() => _CountDownTimerState();
}



class _CountDownTimerState extends State<CountDownTimer> {

  @override
  void initState() {
    super.initState();

  }// end of initstate




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Live Session'),
      ),
      body: Text('Demo Text'),

      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,

        children: [
          _button(title: "Go", onPressed: () =>
          Navigator.of(context ,rootNavigator: true).pushNamed('/liveSession1to1', arguments: {'room_found': 123 } )
          ),


        ],
      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }

  Widget _button({required String title, VoidCallback? onPressed}) {
    return Expanded(
        child: TextButton(
          child: Text(
            title,
            style: const TextStyle(color: Colors.white),
          ),
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.red),
          ),

          onPressed: onPressed,
        ));
  }
}

Error found:

The following assertion was thrown while handling a gesture:

Could not find a generator for route RouteSettings("/liveSession1to1", {room_found: 123}) in the _WidgetsAppState.

Make sure your root app widget has provided a way to generate this route. Generators for routes are searched for in the following order:

For the "/" route, the "home" property, if non-null, is used.
Otherwise, the "routes" table is used, if it has an entry for the route.
Otherwise, onGenerateRoute is called. It should return a non-null value for any valid route not handled by "home" and "routes".
Finally if all else fails onUnknownRoute is called. Unfortunately, onUnknownRoute was not set.

So how to solve the problem ?

Navigator push not working in Flutter Desktop

I wrote some code to navigate between pages:

Navigator.pushReplacementNamed(context, Home.routeName);

WidgetsBinding.instance?.addPostFrameCallback((_) {
  Navigator.pushNamed(context, Home.routeName);
});

Navigator.of(context).pushReplacementNamed(Home.routeName);

All of them work on the web and android but they don't work on desktop.

How can I navigate on desktop?

Flutter: Autoroute : RouteGuard not working in AutoTabsScaffold

I am trying add auth guard for my AutoTabsScaffold [bottom nav] but it's not working, It's working in other navigation pages but not just inside my landing page [where AutoTabsScaffold| Bottom Nav resides] am I missing something here?

using : auto_route: ^3.2.4 [pub.dev]

class LandingPage

   return AutoTabsScaffold(

      backgroundColor: Theme
          .of(context)
          .scaffoldBackgroundColor,
        routes: const [
          HomeRouter(),
          CategoryRouter(),
          OrderRouter(),
          ProfileRoute(),
      ],
      bottomNavigationBuilder: (_, tabsRouter) {return}

class auth guard:

class RouteGuard extends AutoRedirectGuard {
  final AuthService authService;

  RouteGuard(this.authService) {
    authService.addListener(() {
      if (!authService.authenticated) {
        // should be called when the logic effecting this guard changes
        // e.g when the user is no longer authenticated
        reevaluate();
      }
    });
  }

  @override
  void onNavigation(NavigationResolver resolver, StackRouter router) {
    if (authService.authenticated) return resolver.next();
    router.push(
      LoginRoute(
        onLoginCallback: (_) {
          resolver.next();
          router.removeLast();
        },
      ),
    );
  }
}

router.dart

@MaterialAutoRouter(
  replaceInRouteName: 'Page|Screen,Route',
  routes: <AutoRoute>[
    AutoRoute(page: OrderPreviewPage),
    AutoRoute(page: AddCardPage,),
    AutoRoute(page: PaymentPage,),
    AutoRoute(page: SplashPage, initial: true),
    AutoRoute(page: MyCartPage,),
    AutoRoute(page: IntroPage),
    AutoRoute(page: RegisterPage),
    AutoRoute(page: ProductDetailPage),
    AutoRoute(page: ProductListingPage),
    AutoRoute(page: CartSummaryPage,),
    AutoRoute(page: LoginPage, path: 'login'), //name: 'LoginRoute'
    AutoRoute(
      initial: true,
      page: LandingPage,

      path: 'landing',
      children: [
        AutoRoute(
          path: '',
          name: 'homeRouter',
          page: HomePage,
        ),
        AutoRoute(
          path: 'category',
          name: 'categoryRouter',
          page: CategoryPage,
        ),
        AutoRoute(
          path: 'orders',
          name: 'orderRouter',
          page: OrdersPage,
        ),
        AutoRoute(
          path: 'profile',
          guards: [RouteGuard],    //<------- here registered router guard but not working in Tabscaffold page
          page: ProfilePage,
        ),
        // RedirectRoute(path: '*', redirectTo: ''),

      ],
    ),
  ],
)

Trying to add route guard in bottom navigation but it's not working as I expected. What I am missing here?

in Flutter, what is the difference between .addListener(nofityListeners) and .notifyListeners?
I am not even sure xxManager.notifyListeners() is valid because what I saw so far is just plain notifyListeners() being used in class that extend ChangeNotifier for example :
```
 Timer(
      const Duration(milliseconds: 2000),
      () {
        _initialized = true;
        notifyListeners();
      },
    );
```
here i tried to understand the meaning of
```
class AppRouter extends RouterDelegate<AppLink>
    with
        ChangeNotifier,
        PopNavigatorRouterDelegateMixin {
  @override
  final GlobalKey<NavigatorState> navigatorKey;

  final AppStateManager appStateManager;
  final XXManager xxManager;
  final YYManager yyManager;

  AppRouter({
    required this.appStateManager,
    required this.xxManager,
    required this.yyManager,
  })
      : navigatorKey = GlobalKey<NavigatorState>() {
    appStateManager.addListener(notifyListeners);       <-------This part
.
.
.
}
```
that part of the code for what I understand is to add listener to see the change in appStateManager which if changes will trigger notifyListeners method. what i dont understand is when i change it into:
```
appStateManager.notifyListeners();
```
it didnt show any error but when I ran it apparently it does not listen nor notify (the appStateManager has a Timer function which change the state in this case isInitialized to true after 2s so if the listener catch it, it will "route to next widget" (hope i said it correctly)). with 1st case it will change screen after 2s but on 2nd case it does nothin. what is wrong?

Related questions

Flutter: navigating only part of screen

2 answers

See also questions close to this topic