Flutter: navigating only part of screen
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] ], ), ); } }
How many English words
do you know?
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
how many words do you know
Powered by Examplum