मैं स्पंदन में नौसिखिया हूं और जानना चाहता हूं कि CircularProgressIndicatorमेरे लेआउट में जोड़ने का बेहतर तरीका क्या है । उदाहरण के लिए, मेरा लॉगिन दृश्य। इस दृश्य में उपयोगकर्ता नाम, पासवर्ड और लॉगिन बटन है। मैं एक ओवरले लेआउट (के साथ Opacity) बनाना चाहता था कि, जब लोड हो रहा हो, तो प्रगति सूचक को दिखाएँ जैसे कि मैं नेटिवस्क्रिप्ट में उपयोग करता हूं, लेकिन मैं थोड़ा भ्रमित हूं कि कैसे करना है और अगर यह बेहतर तरीका है। NativeScript पर, उदाहरण के लिए, मैं मुख्य लेआउट में संकेतक सक्रियता जोड़ता हूं और सही या गलत में व्यस्त हूं, इसलिए यह लोड होने पर सभी दृश्य घटकों को ओवरले करता है।
संपादित करें:
मैं इस परिणाम तक पहुंचने में सक्षम था:
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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> {
bool _loading = false;
void _onLoading() {
setState(() {
_loading = true;
new Future.delayed(new Duration(seconds: 3), _login);
});
}
Future _login() async{
setState((){
_loading = false;
});
}
@override
Widget build(BuildContext context) {
var body = new Column(
children: <Widget>[
new Container(
height: 40.0,
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.fromLTRB(15.0, 150.0, 15.0, 0.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new TextField(
decoration: new InputDecoration.collapsed(hintText: "username"),
),
),
new Container(
height: 40.0,
padding: const EdgeInsets.all(10.0),
margin: const EdgeInsets.all(15.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new TextField(
decoration: new InputDecoration.collapsed(hintText: "password"),
),
),
],
);
var bodyProgress = new Container(
child: new Stack(
children: <Widget>[
body,
new Container(
alignment: AlignmentDirectional.center,
decoration: new BoxDecoration(
color: Colors.white70,
),
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue[200],
borderRadius: new BorderRadius.circular(10.0)
),
width: 300.0,
height: 200.0,
alignment: AlignmentDirectional.center,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Center(
child: new SizedBox(
height: 50.0,
width: 50.0,
child: new CircularProgressIndicator(
value: null,
strokeWidth: 7.0,
),
),
),
new Container(
margin: const EdgeInsets.only(top: 25.0),
child: new Center(
child: new Text(
"loading.. wait...",
style: new TextStyle(
color: Colors.white
),
),
),
),
],
),
),
),
],
),
);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
decoration: new BoxDecoration(
color: Colors.blue[200]
),
child: _loading ? bodyProgress : body
),
floatingActionButton: new FloatingActionButton(
onPressed: _onLoading,
tooltip: 'Loading',
child: new Icon(Icons.check),
),
);
}
}
मैं अभी भी राज्यों के विचार के अनुकूल हूं। स्पंदन के साथ काम करने पर यह कोड अपेक्षित है?
धन्यवाद!
