تغير اسم button في flutter stepper

Flutter Dev · 17 أبريل 2021

قمت بستعمال كود للقيام بعمليات ممتابعه بحيث اني اطلب من المستخدم انجاز مهمة قبل الانتقال الى المهمة التاليه

الكود شغال ماشي مشكله ولكن احتاج الى تغير اسم button

بمعنى الان املك زر باسم Continue

ارغب بتغيره على سبيل المثال الى GO او اي كلمة ثانية مختلفه ولكني لم اجد طريقة للقيام بذلك

صورة لتوضيح المشكله :

وهذا الكود المستعمل كامل:

import 'package:fa_stepper/fa_stepper.dart';
import 'package:flutter/material.dart';
import 'first.dart';
import 'second.dart';
import 'third.dart';

void main() {
  runApp(MaterialApp(
      // Title
      title: "Simple Material App",
      // Home
      home: StepperEx()));
}


class StepperEx extends StatefulWidget {
  @override
  _StepperExState createState() => _StepperExState();
}

class _StepperExState extends State<StepperEx> {
  int _currentStep = 0;
  StepperType stepperType = StepperType.vertical;

  switchStepType() {
    setState(() => stepperType == StepperType.vertical
        ? stepperType = StepperType.horizontal
        : stepperType = StepperType.vertical);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Stepper Example'),
      ),
      body:

      Column(
        children: <Widget>[
          Expanded(
            child: Stepper(
              //physics: ClampingScrollPhysics(),
              steps: _stepper(),
              type: stepperType,
              currentStep: this._currentStep,
              onStepTapped: (step) {
                setState(() {
                  this._currentStep = step;
                });
              },
              onStepContinue: () {
                setState(() {
                  if (this._currentStep < this._stepper().length - 1) {
                    this._currentStep = this._currentStep + 1;
                  } else {
                    //Logic
                    print('complete');
                  }
                });
              },
              onStepCancel: () {
                setState(() {
                  if (this._currentStep > 0) {
                    this._currentStep = this._currentStep - 1;
                  } else {
                    this._currentStep = 0;
                  }
                });
              },
            ),
          ),
        ],
      ),

    );
  }

  List<Step> _stepper() {
    List<Step> _steps = [
      Step(
          title: Text('Name'),
          content: Column(
            children: <Widget>[






            ],
          ),
          isActive: _currentStep >= 0,
          state: StepState.complete),
      Step(
          title: Text('Email'),
          content: Column(
            children: <Widget>[





            ],
          ),
          isActive: _currentStep >= 1,
          state: StepState.disabled),

    ];
    return _steps;
  }
}

Wael Aljamal · 18 أبريل 2021

يمكن ذلك من خلال الدالتين:

onStepContinue
onStepCancel

نحتاج لتعريف controlsBuilder callback والذي يأخذ بدوره الدالتين السابقتين و من ثم يمكننا تغيير الاسم:

هذا مثال عن stepper:

Stepper(
      controlsBuilder: (BuildContext context,
          {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: <Widget>[
            TextButton(
              onPressed: onStepContinue,
              child: const Text('NEXT'),
            ),
            TextButton(
              onPressed: onStepCancel,
              child: const Text('EXIT'),
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          title: Text('A'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
        Step(
          title: Text('B'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
      ],
    );

بلال زيادة · 18 أبريل 2021

يمكنك تغيير label النص من خلال Widget Text بهذا الشكل

Text('NEXT')

Text('CANCEL'),

يمكنك وضع زرين بهذا الشكل

TextButton(
  onPressed: onStepContinue,
  child: const Text('NEXT'),
),
TextButton(
  onPressed: onStepCancel,
  child: const Text('CANCEL'),
),

بحيث child تأخذ Widget النص و onPressed تأخذ قيمة الدالة أو الأنتقال. بحيث الدالتين

onStepContinue
onStepCancel

تستخدمان في التحكم في Stepper.

Flutter Dev · 18 أبريل 2021

بتاريخ 14 ساعات قال Wael Aljamal:

يمكن ذلك من خلال الدالتين:

onStepContinue
onStepCancel

نحتاج لتعريف controlsBuilder callback والذي يأخذ بدوره الدالتين السابقتين و من ثم يمكننا تغيير الاسم:

هذا مثال عن stepper:


Stepper(
      controlsBuilder: (BuildContext context,
          {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: <Widget>[
            TextButton(
              onPressed: onStepContinue,
              child: const Text('NEXT'),
            ),
            TextButton(
              onPressed: onStepCancel,
              child: const Text('EXIT'),
            ),
          ],
        );
      },
      steps: const <Step>[
        Step(
          title: Text('A'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
        Step(
          title: Text('B'),
          content: SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        ),
      ],
    );

كل الشكر اخي لقد نجح الامر

بتاريخ 11 ساعات قال بلال زيادة:
يمكنك تغيير label النص من خلال Widget Text بهذا الشكل
Text('NEXT')
Text('CANCEL'),
يمكنك وضع زرين بهذا الشكل
TextButton(
  onPressed: onStepContinue,
  child: const Text('NEXT'),
),
TextButton(
  onPressed: onStepCancel,
  child: const Text('CANCEL'),
),
بحيث child تأخذ Widget النص و onPressed تأخذ قيمة الدالة أو الأنتقال. بحيث الدالتين
onStepContinue
onStepCancel
تستخدمان في التحكم في Stepper.

كل الشكر الغالي لقد نجح الامر

جزاك الله الف خير يا رب

تغير اسم button في flutter stepper

السؤال

Flutter Dev

3 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

بلال زيادة

Flutter Dev

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية