আমি তোড়জোড়ায় নবাগত CircularProgressIndicatorএবং আমার লেআউটে আরও ভাল উপায় যুক্ত করার উপায়টি জানতে চাই । উদাহরণস্বরূপ, আমার লগইন ভিউ। এই ভিউটিতে ব্যবহারকারীর নাম, পাসওয়ার্ড এবং লগইন বোতাম রয়েছে। আমি একটি ওভারলে লেআউট তৈরি করতে চাই (সাথে Opacity) যা লোড করার সময়, আমি যেমন নেটিস্ক্রিপ্টে ব্যবহার করি তেমনি অগ্রগতি সূচক দেখায় তবে কীভাবে কীভাবে করা যায় এবং এটি যদি আরও ভাল হয় তবে আমি খুব বিভ্রান্ত হয়েছি। নেটিভস্ক্রিপ্টে, উদাহরণস্বরূপ, আমি মূল বিন্যাসে সূচকঅ্যাক্টিভিটি যুক্ত করি এবং সত্য বা মিথ্যাতে ব্যস্ত থাকি, সুতরাং লোড হওয়ার সময় এটি সমস্ত দর্শন উপাদানকে ওভারলে করে।
সম্পাদনা করুন:
আমি এই ফলাফলটিতে পৌঁছাতে সক্ষম হয়েছি:
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),
),
);
}
}
আমি এখনও রাজ্যগুলির ধারণার সাথে খাপ খাইয়ে নিচ্ছি। এই কোডটি প্রত্যাশার মধ্যে থাকা যখন ঝাঁকুনির সাথে কাজ করার সময়?
ধন্যবাদ!
