Flutter web: How to make horizontal scroll in stepper form?
You can just use a ListView
and set the scrollDirection
to horizontal. The Container
is there because it needs something to give it a size.
Step(
title: Text('Number'),
content: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Radio(
value: "1",
),
Center(child: Text("1")),
Radio(
value: "2",
),
Center(child: Text("1")),
Radio(
value: "3",
),
Center(child: Text("3")),
Radio(
value: "4",
),
Center(child: Text("4")),
Radio(
value: "5",
),
Center(child: Text("5")),
Radio(
value: "6",
),
Center(child: Text("6")),
Radio(
value: "7",
),
Center(child: Text("7")),
Radio(
value: "8",
),
Center(child: Text("8")),
Radio(
value: "9",
),
Center(child: Text("9")),
],
),
),
isActive: _currentStep >= 2,
),
newbie dev
I am currently student and trying to learn various language including the android which i am currently pursing.
Updated on November 27, 2022Comments
-
newbie dev over 1 year
I am trying to make a flutter web form using stepper and i am doing the experiment for small size screen. I have done the vertical scroll using the physics: ClampingScrollPhysics() method. However, I am unable to make horizontal scroll inside the stepper step. I want to make the radio button horizontally scroll able so that the error message will hide and i the text goes out of the screen, the user can scroll to that part. I already used SingleChildCcrollView(crollDirection: Axis.horizontal) but it didn't work. The image is
The code for the flutter program is as below: -
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Stepper Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Stepper Tutorial'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _currentStep = 0; TextEditingController nameController = TextEditingController(); TextEditingController emailController = TextEditingController(); TextEditingController addressController = TextEditingController(); List<String> demoList = []; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: Column( children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.start, ), Expanded( child: SingleChildScrollView( // scrollDirection: Axis.horizontal, child: Stepper( physics: ClampingScrollPhysics(), steps: _mySteps(), currentStep: this._currentStep, onStepTapped: (step) { setState( () { this._currentStep = step; }, ); }, onStepContinue: () { setState( () { if (this._currentStep < this._mySteps().length - 1) { this._currentStep = this._currentStep + 1; } }, ); }, onStepCancel: () { setState( () { if (this._currentStep > 0) { this._currentStep = this._currentStep - 1; } else { this._currentStep = 0; } }, ); }, ), ), ), demoList.isEmpty ? Text("") : Column( children: demoList.map((e) { return Text(e); }).toList(), ), ElevatedButton( onPressed: () { demoList = []; viewList(); }, child: Text("Click to see List"), ), ], ), ); } viewList() { if (nameController.text.isEmpty || emailController.text.isEmpty || addressController.text.isEmpty) { setState( () { if (nameController.text.isEmpty) { demoList.add("Name field is empty"); } else if (emailController.text.isEmpty) { demoList.add("Email field is Empty"); } else if (addressController.text.isEmpty) { demoList.add("Address field is empty"); } }, ); } else { demoList.add(nameController.text); demoList.add(emailController.text); demoList.add(addressController.text); setState( () { demoList = demoList; }, ); } } List<Step> _mySteps() { List<Step> _steps = [ Step( title: Text('Name'), content: TextField( controller: nameController, ), isActive: _currentStep >= 0, ), Step( title: Text('Email'), content: TextField( controller: emailController, ), isActive: _currentStep >= 1, ), Step( title: Text('Address'), content: TextField( controller: addressController, ), isActive: _currentStep >= 2, ), Step( title: Text('Number'), content: Row( children: <Widget>[ SingleChildScrollView( physics: ClampingScrollPhysics(), ), SafeArea( child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Form( child: Row( children: <Widget>[ Radio( value: "1", ), Text("1"), Radio( value: "2", ), Text("2"), Radio( value: "3", ), Text("3"), Radio( value: "4", ), Text("4"), Radio( value: "5", ), Text("5"), Radio( value: "6", ), Text("6"), Radio( value: "7", ), Text("7"), Radio( value: "8", ), Text("8"), Radio( value: "9", ), Text("9"), ], ), ), ), ) ], ), isActive: _currentStep >= 2, ), ]; return _steps; } }