10_flutter_BottomSheet(底部滑起列表),Step(步驟),LinearProgressIndicator(進度條)

1_BottomSheet(底部滑起列表)

---

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp()
  ));
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('showModalBottomSheet')
      ),
      body: Center(
        child: RaisedButton(
          child: Text('肯定'),
          onPressed: () {
            showModalBottomSheet<Null>(context:context, builder:(BuildContext context) {
              return Container(
                height: 100,
                child: Column(
                  children: <Widget>[
                    RaisedButton(
                              child: Text('升壓'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              }),
                           RaisedButton(
                              child: Text('降壓'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              }),    
                  ],
                )
              );
            });
          }
        )
      )
    );
  }
}
複製代碼

2_Step(步驟)

---

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: MyHome()));
}

class MyHome extends StatefulWidget {
  @override
  MyHomeState createState() => MyHomeState();
}

class MyHomeState extends State<MyHome> {
  int currentstep = 0;
  List<Step> powerstep = [
    Step(
        title: Text("電感 1"),
        content: Text("測試1"),
        isActive: true),
    Step(
        title: Text("二極管 2"),
        content: Text("測試2"),
        state: StepState.editing,
        isActive: true),
    Step(
        title: Text("電容 3"),
        content: Text("測試3"),
        isActive: true),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("Simple Material App"),
      ),
      body: Container(
          child: Stepper(
        currentStep: this.currentstep,
        steps: powerstep,
        type: StepperType.vertical,

        onStepTapped: (step) {
          setState(() {
            currentstep = step;
          });
        },

        onStepCancel: () {
          setState(() {
            if (currentstep > 0) {
              currentstep = currentstep - 1;
            } else {
              currentstep = 0;
            }
          });
        },

        onStepContinue: () {
          setState(() {
            if (currentstep < powerstep.length - 1) {
              currentstep = currentstep + 1;
            } else {
              currentstep = 0;
            }
          });
        },

      )),
    );
  }
}
複製代碼

3_LinearProgressIndicator(進度條)

---

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LinearProgressIndicator"),
      ),
      body:LinearProgressIndicator(),
    );
  }
}
複製代碼