#flutter #flutter-layout
Вопрос:
я работаю над проектом для своего университетского проекта, и у меня возникла проблема.
Во-первых, я хочу добавить обратную сторону на свой экран, но я уже использую выравнивание для «далее» в правом нижнем углу, в то время как я хочу, чтобы задняя часть была в левом нижнем углу
Во-вторых, я хочу сделать заголовок (приветствие,цель,создатель) посередине, но я не могу поместить его в центр, потому что я использую поле размера
В-третьих, я хочу, чтобы экран ввода появлялся только один раз, поэтому, когда пользователь, который его открыл, не увидит его снова (в основном при первом открытии, экран ввода, но во второй раз сразу на главную страницу)
извините за мою английскую фотографию, если вы хотите визуализировать: Фото Вот код:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../home_screen.dart';
class Onboarding extends StatefulWidget {
@override
_OnboardingScreen createState() => _OnboardingScreen();
}
class _OnboardingScreen extends State<Onboarding> {
final int _numPages = 3;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < _numPages; i ) {
list.add(i == _currentPage ? _indicator(true) : _indicator(false));
}
return list;
}
Widget _indicator(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(
color: isActive ? Colors.white : Color(0xFF7B51D3),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.4, 0.7, 0.9],
colors: [
Colors.black,
Color(0xff112339),
Color(0xff112339),
Colors.black,
],
),
),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
Padding(
padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/Logo.png',
),
height: 120.0,
width: 120.0,
),
),
SizedBox(height: 50.0),
Text(
'Welcome',
style: TextStyle(
color: Colors.white,
fontSize: 21.0,
height: 1.5,
),
),
SizedBox(height: 30.0),
Text(
'Welcome to Moviez, the place where you will spend your time magically',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
height: 1.2,
fontFamily: 'Raleway',
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/Logo.png',
),
height: 120.0,
width: 120.0,
),
),
SizedBox(height: 50.0),
Text(
'Purpose',
style: TextStyle(
color: Colors.white,
fontSize: 21.0,
height: 1.5,
),
),
SizedBox(height: 30.0),
Text(
'This App is for educational purposes only',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
height: 1.2,
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top:70.0,left: 40.0,right: 40.0,),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Image(
image: AssetImage(
'assets/images/Logo.png',
),
height: 120.0,
width: 120.0,
),
),
SizedBox(height: 50.0),
Text(
'Creator',
style: TextStyle(
color: Colors.white,
fontSize: 21.0,
height: 1.5
),
),
SizedBox(height: 30.0),
Text(
'Adela, Caroline, Cordellya, David, Valentino',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
height: 1.2,
),
),
],
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage != _numPages - 1
? Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
),
),
SizedBox(width: 10.0),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30.0,
),
],
),
),
),
)
: Text(''),
],
),
),
),
),
bottomSheet: _currentPage == _numPages - 1
? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Center(
child: Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: Text(
'Get started',
style: TextStyle(
color: Color(0xFF5B16D0),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
)
: Text(''),
);
}
}
вот мой главный.дротик
import 'package:flutter/material.dart';
import 'package:movie_app/screens/home_screen/widgets/onboard.dart';
import 'screens/home_screen/home_screen.dart';
void main() {
runApp(MyApp());
Paint.enableDithering = true;
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Movie App',
theme: ThemeData(
primarySwatch: Colors.blue,
iconTheme: IconThemeData(
color: Colors.white,
),
textTheme: ThemeData.light().textTheme.copyWith(
bodyText1: TextStyle(
// fontFamily: 'OpenSans',
// fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.white,
),
button: TextStyle(
color: Colors.white,
),
),
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(color: Colors.white),
actionsIconTheme: IconThemeData(size: 30),
)),
home: Onboarding(),
);
}
}
Ответ №1:
Отвечая на ваш первый вопрос: Предполагая, что вы хотите, чтобы кнопка «назад» находилась в той же строке, что и кнопка «далее», я бы предложил вам отредактировать свой Row виджет следующим образом.
Row(children: [
Icon(Icons.arrow_back),
Text('Back'),
Spacer(),
Text('Next'),
Icon(Icons.arrow_forward),
])
Я использовал два Text виджета, просто чтобы показать вам, как это будет выглядеть. В вашем приложении вы можете использовать две разные кнопки с разным текстом и разными onTap onPressed способами или. Вы можете проверить Button раздел этой страницы, чтобы узнать больше о различных кнопках, доступных в Flutter.
Во-вторых: я думаю, что все, что вам нужно сделать, чтобы ваши заголовки были сосредоточены на экране, — это изменить crossAxisAlignment свойство связанной Column формы CrossAxisAlignment.start на CrossAxisAlignment.center
Комментарии:
1. Что касается третьего, я бы предложил опубликовать его в качестве отдельного вопроса.
2. второй пункт верен, спасибо, я думал, что это изменит весь текст, включая нижний. и отвечая на первый вопрос, как насчет контролера страниц? если я это сделаю, то не обе кнопки будут делать следующую страницу? cmiiw я новичок в порхании
3. Я отредактировал свой ответ, чтобы ответить на ваши вопросы
4. эй, извините за поздний ответ, я не очень активен в stackoverflow, и да, это мне помогло. еще раз благодарю вас и очень сожалею о запоздалом ответе